<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>

    <meta charset="utf-8">
    <title>From data to Viz | Find the graphic you need</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="A classification of all possible chart types classified following the input data format.">
    <meta name="keywords" content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification">
    <meta name="author" content="Yan Holtz and Conor Healy">

    <!-- Control appearance when share by social media -->
    <meta property="og:title" content="From data to Viz | Find the graphic you need" />
    <meta property="og:image" content="img/patchwork/datatoviz_overview7.png" />
    <meta property="og:description" content="A classification of chart types based on their input data format." />
    <meta property='og:url' content="data-to-viz.com" />
    <meta property="og:type" content="website" />
    <link rel="icon" href="img/logo/data-to-viz.ico">

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet">


  </head>

  <body id="page-top">





    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
          <img src="img/logo/typo.png" style="width:30%; vertical-align: top;">
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#explore">Explore</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#story">Story</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">All</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="caveats.html">Caveats</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="poster.html">Poster</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>





    <!-- Header -->
    <header class="masthead">
     <div class="parallax">
     <div class="container">
        <div class="intro-text">
          <img src="img/logo/tree-s.png" style="width:45%;height:45%;">
          <br><br>
          <div class="intro-lead-in">From Data to Viz leads you to the most appropriate graph for your data. It links to the code to build it and lists common caveats you should avoid.</div>
          <div style="text-align:center">
            <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#explore">Explore</a>
            <a class="btn btn-primary btn-xl text-uppercase" data-toggle="modal" href="#poster_full">See poster</a>
          </div>
        </div>
      </div>
      <!-- Add iib image -->
      <img src="img/IIB-awards-winner.png" width="200px" style="opacity: .7; position: absolute; top:0 ; left:0">
      </div>
    </header>

















<!-- =======================  TREE SELECTION SECTION ======================= -->

    <section id="explore" style="padding: 0px 0; padding-top: 100px;">
      <div class="container">
        <div class="row">
          <div class="col-lg-2 text-center"></div>
          <div class="col-lg-8 text-center">
            <p>What kind of data do you have? Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities. Alternatively, check the <a data-toggle="modal" href="#poster_full">complete decision tree</a>.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 text-center">
            <div id="tree-button-container">
              <button class="btn btn-secondary active" onclick="showTree('num')" data-tree-section="num">Numeric</button>
              <button class="btn btn-secondary" onclick="showTree('cat')" data-tree-section="cat">Categoric</button>
              <button class="btn btn-secondary" onclick="showTree('catnum')" data-tree-section="catnum">Num & Cat</button>
              <button class="btn btn-secondary" onclick="showTree('geo')" data-tree-section="geo">Maps</button>
              <button class="btn btn-secondary" onclick="showTree('relationnal')" data-tree-section="relationnal">Network</button>
              <button class="btn btn-secondary" onclick="showTree('time')" data-tree-section="time">Time series</button>
            </div>
          </div>
        </div>
       </div>
      <br>

<!-- ======================================================================= -->














<!-- ==================== TREE SECTION ===================================== -->

<!-- NOTE TO GO FROM SVG TO THIS CODE -->
<!--  Change .st css classes to unique names -->
<!--  insert the tree in a div: <div id="num" class="tree" style="text-align:center;">   -->
<!--  replace the <svg> header with <svg version="1.1" id="Numeric_copy" width="80%" height="1433.858px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1502.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve"> -->
<!--  change path to png images that compose the tree -->
<!--  add class="graphtypelogo" to every images to give them their CSS spec (get grey when hovered -->
<!--  make the png clickable: to do so, put <a data-toggle="modal" href="#treemap"></a> around it -->
<!--  update the modal links one by one.. -->
<!--  add the tooltip around Polygons: wrap polygon and text into <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' title="<em>Your data look like</em><br> <img class='img-fluid' src='img/table/Nested_Data_Frame.png' alt=''><u>with</u> <b>HTML</b>"> -->
<!-- -->



<!-- Skip a line befor the trees -->

<!-- Numeric only -->
<div id="num" class="tree" style="text-align:center;">
<svg version="1.1" id="Numeric_copy" width="80%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1502.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
<style type="text/css">
  .numst0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
  .numst1{font-family:'Lato-Regular';}
  .numst2{font-size:13px; fill: black !important; stroke: none !important; }
  .numst3{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
  .numst4{fill:#808285; font-size: 13px !important;}
  .numst5{font-family:'OpenSans-Semibold';}
  .numst6{font-size:14px;}
</style>
<g>
  <line class="numst0" x1="1405.7" y1="312" x2="1405.7" y2="1355.8"/>
  <text transform="matrix(1 0 0 1 1356.6582 871.4056)"><tspan x="0" y="0" class="numst1 numst2">RIDGE</tspan><tspan x="10.9" y="13" class="numst1 numst2">LINE</tspan></text>
  <text transform="matrix(1 0 0 1 1352.0439 733.4965)"><tspan x="0" y="0" class="numst1 numst2">VIOLIN</tspan><tspan x="10.5" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 1335.3188 595.5875)" class="numst1 numst2">BOXPLOT</text>
  <text transform="matrix(1 0 0 1 1301.064 1423.0453)" class="numst1 numst2">DENDROGRAM</text>
  <text transform="matrix(1 0 0 1 1332.5439 1285.1371)" class="numst1 numst2">HEATMAP</text>
  <text transform="matrix(1 0 0 1 1369.8401 1009.316)" class="numst1 numst2">PCA</text>

  <g data-toggle="tooltip" data-html="true" data-placement="right" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by many columns, all numeric</em><br><br><img width='695' height='267' class='img-fluid' src='img/table/SeveralNum.png' alt=''><br><br></div>">
    <polygon class="numst3" points="1364,256.4 1405.7,232.3 1447.4,256.4 1447.4,304.6 1405.7,328.7 1364,304.6  "/>
    <text transform="matrix(1 0 0 1 1390.7357 276.1355)"><tspan x="0" y="0" class="numst4 numst5 numst6">NOT</tspan><tspan x="-17.6" y="16.8" class="numst4 numst5 numst6">ORDERED</tspan></text>
  </g>

  <text transform="matrix(1 0 0 1 1296.4561 1147.2285)" class="numst1 numst2">CORRELOGRAM</text>
  <path class="numst0" d="M1375.3,185.7h16.3c5.5,5.5,8.6,8.6,14.2,14.2v32.5"/>
  <g>

      <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.2616 22.5944)" class="numst4" cx="1405.7" cy="1217.9" rx="52.4" ry="52.4"/>

      <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1085 1169.2806)">
    </a>
  </g>
  <g>
    <circle class="numst4" cx="1405.7" cy="666.2" r="52.4"/>

      <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 617.6404)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1458.1,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      S1458.1,499.3,1458.1,528.3z"/>

      <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 479.7304)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1458.1,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      S1458.1,1051,1458.1,1079.9z"/>

      <a data-toggle="modal" href="#correlogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CorrelogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 1031.3707)">
    </a>
  </g>
  <g>
    <circle class="numst4" cx="1405.7" cy="1355.8" r="52.4"/>

      <a data-toggle="modal" href="#dendrogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DendrogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 1307.1903)">
    </a>
  </g>
  <g>
    <circle class="numst4" cx="1405.7" cy="804.1" r="52.4"/>

      <a data-toggle="modal" href="#ridgeline"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/JoyplotSmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 755.55)">
    </a>
  </g>
  <g>
    <circle class="numst4" cx="1405.7" cy="942" r="52.4"/>

      <a data-toggle="modal" href="#pca"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/PCAsmall.png"  transform="matrix(0.8522 0 0 0.8522 1357.1157 893.4603)">
    </a>
  </g>
</g>
<g>
  <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by many columns, all numeric. Data are ordered</em><br><br><img width='695' height='267' class='img-fluid' src='img/table/SeveralNumOrdered.png' alt=''><br><br></div>">
    <polygon class="numst3" points="1219.6,256.4 1261.4,232.3 1303.1,256.4 1303.1,304.6 1261.4,328.7 1219.6,304.6  "/>
    <text transform="matrix(1 0 0 1 1228.8063 284.5356)" class="numst4 numst5 numst6">ORDERED</text>
  </g>
  <path class="numst0" d="M1291.8,185.7h-16.3c-5.5,5.5-8.6,8.6-14.2,14.2v32.5"/>
  <path class="numst0" d="M1219.6,304.6h-16.3c-5.5,5.5-8.6,8.6-14.2,14.2v37"/>
</g>
<g>
  <polygon class="numst3" points="1291.8,137.5 1333.5,113.4 1375.3,137.5 1375.3,185.7 1333.5,209.8 1291.8,185.7  "/>
  <text transform="matrix(1 0 0 1 1304.6089 157.1974)"><tspan x="0" y="0" class="numst4 numst5 numst6">SEVERAL</tspan><tspan x="-3.2" y="16.8" class="numst4 numst5 numst6">NUMERIC</tspan></text>
</g>
<g>
  <text transform="matrix(1 0 0 1 1150.7378 871.4054)"><tspan x="0" y="0" class="numst1 numst2">LINE</tspan><tspan x="-4.8" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 1145.2324 1009.3164)"><tspan x="0" y="0" class="numst1 numst2">AREA</tspan><tspan x="7.2" y="13" class="numst1 numst2">(SM)</tspan></text>
  <text transform="matrix(1 0 0 1 1127.2334 733.4952)"><tspan x="0" y="0" class="numst1 numst2">STREAM</tspan><tspan x="7.1" y="13" class="numst1 numst2">GRAPH</tspan></text>
  <text transform="matrix(1 0 0 1 1120.4048 595.587)"><tspan x="0" y="0" class="numst1 numst2">STACKED</tspan><tspan x="-10.9" y="13" class="numst1 numst2">AREA PLOT</tspan></text>
  <path class="numst0" d="M1158.7,304.6h16.3c5.5,5.5,8.6,8.6,14.2,14.2V942"/>
  <g>
  <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by 3 columns, all numeric. Data are ordered (see column 1 here)</em><br><br><img width='695' height='267' class='img-fluid' src='img/table/ThreeNumOrdered.png' alt=''><br><br></div>">
      <polygon class="numst3" points="1075.3,256.4 1117,232.3 1158.7,256.4 1158.7,304.6 1117,328.7 1075.3,304.6    "/>
      <text transform="matrix(1 0 0 1 1084.4702 284.5357)" class="numst4 numst5 numst6">ORDERED</text>
    </g>
    <path class="numst0" d="M1086.6,185.7h16.3c5.5,5.5,8.6,8.6,14.2,14.2v32.5"/>
  </g>
  <g>
    <path class="numst4" d="M1241.6,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1218.1,475.9,1241.6,499.3,1241.6,528.3z"/>

      <a data-toggle="modal" href="#stackedarea"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StackedAreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 1140.6111 479.7304)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1241.6,666.2c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1218.1,613.8,1241.6,637.3,1241.6,666.2z"/>

      <a data-toggle="modal" href="#streamgraph"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StreamSmall.png"  transform="matrix(0.8522 0 0 0.8522 1140.6111 617.6404)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1241.6,804.1c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1218.1,751.7,1241.6,775.2,1241.6,804.1z"/>

      <a data-toggle="modal" href="#line"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LineSmall.png"  transform="matrix(0.8522 0 0 0.8522 1140.6111 755.5505)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1241.6,942c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1218.1,889.6,1241.6,913.1,1241.6,942z"/>

      <a data-toggle="modal" href="#area"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/AreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 1140.6111 893.4613)">
    </a>
  </g>
</g>
<g>
  <line class="numst0" x1="972.7" y1="307.7" x2="972.7" y2="942"/>
  <text transform="matrix(1 0 0 1 913.0229 871.4054)"><tspan x="0" y="0" class="numst1 numst2">BUBBLE</tspan><tspan x="16.4" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 885.6841 1009.316)"><tspan x="0" y="0" class="numst1 numst2">3D SCATTER</tspan><tspan x="-2.7" y="13" class="numst1 numst2">OR SURFACE</tspan></text>
  <text transform="matrix(1 0 0 1 918.8921 733.4952)"><tspan x="0" y="0" class="numst1 numst2">VIOLIN</tspan><tspan x="10.5" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 902.3071 595.587)" class="numst1 numst2">BOXPLOT</text>

  <g data-toggle="tooltip" data-html="true" data-placement="left" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by 3 columns, all numeric.</em><br><br><img width='695' height='267' class='img-fluid' src='img/table/ThreeNum.png' alt=''><br><br></div>">
    <polygon class="numst3" points="930.9,256.4 972.7,232.3 1014.4,256.4 1014.4,304.6 972.7,328.7 930.9,304.6  "/>
    <text transform="matrix(1 0 0 1 957.7271 276.1364)"><tspan x="0" y="0" class="numst4 numst5 numst6">NOT</tspan><tspan x="-17.6" y="16.8" class="numst4 numst5 numst6">ORDERED</tspan></text>
  </g>

  <path class="numst0" d="M1003.1,185.7h-16.3c-5.5,5.5-8.6,8.6-14.2,14.2v32.5"/>
  <g>
    <path class="numst4" d="M1025.1,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1001.6,475.9,1025.1,499.3,1025.1,528.3z"/>

      <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 924.1057 479.7304)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1025.1,666.2c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1001.6,613.8,1025.1,637.3,1025.1,666.2z"/>

      <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 924.1057 617.6404)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1025.1,804.1c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1001.6,751.7,1025.1,775.2,1025.1,804.1z"/>

      <a data-toggle="modal" href="#bubble"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BubblePlotSmall.png"  transform="matrix(0.8522 0 0 0.8522 924.1057 755.5505)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M1025.1,942c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C1001.6,889.6,1025.1,913.1,1025.1,942z"/>

      <a data-toggle="modal" href="#"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/3dRoundSmall.png"  transform="matrix(0.8522 0 0 0.8522 924.1057 893.4613)">
    </a>
  </g>
</g>
<g>
  <polygon class="numst3" points="1003.1,137.5 1044.8,113.4 1086.6,137.5 1086.6,185.7 1044.8,209.8 1003.1,185.7  "/>
  <text transform="matrix(1 0 0 1 1023.3417 148.7982)"><tspan x="0" y="0" class="numst4 numst5 numst6">THREE</tspan><tspan x="-10.6" y="16.8" class="numst4 numst5 numst6">NUMERIC</tspan><tspan x="-14.9" y="33.6" class="numst4 numst5 numst6">VARIABLES</tspan></text>
</g>


<!-- 2 Numeric -->
<g>
  <line class="numst0" x1="706.6" y1="307.7" x2="706.6" y2="814.3"/>
  <text transform="matrix(1 0 0 1 662.6509 733.4961)"><tspan x="0" y="0" class="numst1 numst2">AREA</tspan><tspan x="0.7" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 668.1562 871.4058)"><tspan x="0" y="0" class="numst1 numst2">LINE</tspan><tspan x="-4.8" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 615.8408 595.5879)"><tspan x="0" y="0" class="numst1 numst2">CONNECTED</tspan><tspan x="-11.2" y="13" class="numst1 numst2">SCATTER PLOT</tspan></text>

  <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by 2 columns, all numeric. Data are ordered (see column 1)</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/TwoNumOrdered.png' alt=''><br><br></div>">
    <polygon class="numst3" points="664.9,256.4 706.6,232.3 748.3,256.4 748.3,304.6 706.6,328.7 664.9,304.6  "/>
    <text transform="matrix(1 0 0 1 674.0579 284.5357)" class="numst4 numst5 numst6">ORDERED</text>
  </g>

  <g>
    <path class="numst4" d="M759,804.1c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C735.6,751.7,759,775.2,759,804.1z"/>

      <a data-toggle="modal" href="#line"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LineSmall.png"  transform="matrix(0.8522 0 0 0.8522 658.0298 755.55)">
    </a>
  </g>
  <path class="numst0" d="M612.6,185.7h79.9c5.5,5.5,8.6,8.6,14.2,14.2v32.5"/>
  <g>
    <path class="numst4" d="M759,666.2c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C735.6,613.8,759,637.3,759,666.2z"/>

      <a data-toggle="modal" href="#area"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/AreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 658.0308 617.6409)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M759,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C735.6,475.9,759,499.3,759,528.3z"/>

      <a data-toggle="modal" href="#connectedscatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterConnectedSmall.png"  transform="matrix(0.8522 0 0 0.8522 658.0308 479.731)">
    </a>
  </g>
</g>
<g>
  <line class="numst0" x1="501.4" y1="431" x2="501.4" y2="942"/>
  <text transform="matrix(1 0 0 1 447.7534 595.5883)"><tspan x="0" y="0" class="numst1 numst2">VIOLIN</tspan><tspan x="10.5" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 437.0413 733.4962)"><tspan x="0" y="0" class="numst1 numst2">DENSITY</tspan><tspan x="21.2" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 397.2679 871.4056)"><tspan x="0" y="0" class="numst1 numst2">SCATTER WITH</tspan><tspan x="-16.8" y="13" class="numst1 numst2">MARGINAL POINT</tspan></text>
  <text transform="matrix(1 0 0 1 416.2869 1009.3162)"><tspan x="0" y="0" class="numst1 numst2">2D DENSITY</tspan><tspan x="42" y="13" class="numst1 numst2">PLOT</tspan></text>

  <g data-toggle="tooltip" data-html="true" data-placement="left" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by 2 columns, all numeric. In this case we consider dataset with more than ~2000 data points approx.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/TwoNum.png' alt=''><br><br></div>">
    <polygon class="numst3" points="459.7,379.1 501.4,355 543.1,379.1 543.1,427.3 501.4,451.4 459.7,427.3  "/>
    <text transform="matrix(1 0 0 1 480.6847 398.8495)"><tspan x="0" y="0" class="numst4 numst5 numst6">MANY</tspan><tspan x="-4.5" y="16.8" class="numst4 numst5 numst6">POINTS</tspan></text>
  </g>

  <g>
    <path class="numst4" d="M553.8,666.2c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C530.4,613.8,553.8,637.3,553.8,666.2z"/>

      <a data-toggle="modal" href="#density"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DensitySmall.png"  transform="matrix(0.8522 0 0 0.8522 452.825 617.6411)">
    </a>
  </g>
  <path class="numst0" d="M476.8,306.5h10.5c5.5,5.5,8.6,8.6,14.2,14.2V355"/>
  <g>
    <path class="numst4" d="M553.8,942c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C530.4,889.6,553.8,913.1,553.8,942z"/>

      <a data-toggle="modal" href="#density2d"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/2dDensitySmall.png"  transform="matrix(0.8522 0 0 0.8522 452.825 893.4613)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M553.8,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C530.4,475.9,553.8,499.3,553.8,528.3z"/>

      <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 452.825 479.731)">
    </a>
  </g>
  <g>
    <g>
      <path class="numst4" d="M553.8,804.1c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
        C530.4,751.7,553.8,775.2,553.8,804.1z"/>
    </g>

      <a data-toggle="modal" href="#scatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/JointSmall.png"  transform="matrix(0.8522 0 0 0.8522 452.825 755.5511)">
    </a>
  </g>
</g>
<g>
  <line class="numst0" x1="368.7" y1="426.7" x2="368.7" y2="836.3"/>
  <text transform="matrix(1 0 0 1 302.4385 871.4061)"><tspan x="0" y="0" class="numst1 numst2">SCATTER</tspan><tspan x="23" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 280.7671 733.496)" class="numst1 numst2">HISTOGRAM</text>
  <text transform="matrix(1 0 0 1 294.9795 595.5878)" class="numst1 numst2">BOX PLOT</text>

  <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A dataset composed by 2 columns, all numeric. In this case we consider dataset with less than ~2000 data points approx.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/TwoNum.png' alt=''><br><br></div>">
    <polygon class="numst3" points="326.9,375.4 368.7,351.3 410.4,375.4 410.4,423.5 368.7,447.6 326.9,423.5  "/>
    <text transform="matrix(1 0 0 1 354.4259 395.0734)"><tspan x="0" y="0" class="numst4 numst5 numst6">FEW</tspan><tspan x="-11" y="16.8" class="numst4 numst5 numst6">POINTS</tspan></text>
  </g>

  <g>
    <path class="numst4" d="M421.1,666.2c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C397.6,613.8,421.1,637.3,421.1,666.2z"/>

      <a data-toggle="modal" href="#histogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HistogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 320.1048 617.641)">
    </a>
  </g>
  <path class="numst0" d="M393.3,306.5h-10.5c-5.5,5.5-8.6,8.6-14.2,14.2v30.6"/>
  <g>
    <path class="numst4" d="M421.1,804.1c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C397.6,751.7,421.1,775.2,421.1,804.1z"/>

      <a data-toggle="modal" href="#scatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterPlotSmall.png"  transform="matrix(0.8522 0 0 0.8522 320.1048 755.5511)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M421.1,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
      C397.6,475.9,421.1,499.3,421.1,528.3z"/>

      <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 320.1048 479.731)">
    </a>
  </g>
</g>
<g>
  <polygon class="numst3" points="393.3,258.3 435,234.2 476.8,258.3 476.8,306.5 435,330.6 393.3,306.5  "/>
  <text transform="matrix(1 0 0 1 420.086 278.0233)"><tspan x="0" y="0" class="numst4 numst5 numst6">NOT</tspan><tspan x="-17.6" y="16.8" class="numst4 numst5 numst6">ORDERED</tspan></text>
  <path class="numst0" d="M529.1,185.7h-79.9c-5.5,5.5-8.6,8.6-14.2,14.2l0,34.4"/>
</g>
<g>
  <polygon class="numst3" points="529.1,137.5 570.8,113.4 612.6,137.5 612.6,185.7 570.8,209.8 529.1,185.7  "/>
  <text transform="matrix(1 0 0 1 554.7292 148.7983)"><tspan x="0" y="0" class="numst4 numst5 numst6">TWO</tspan><tspan x="-16" y="16.8" class="numst4 numst5 numst6">NUMERIC</tspan><tspan x="-20.3" y="33.6" class="numst4 numst5 numst6">VARIABLES</tspan></text>
</g>

<!-- One Numeric -->
<g>
  <line class="numst0" x1="102.6" y1="193.1" x2="102.6" y2="666.2"/>
  <g>
    <circle class="numst4" cx="102.6" cy="666.2" r="52.4"/>

      <a data-toggle="modal" href="#density"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DensitySmall.png"  transform="matrix(0.8522 0 0 0.8522 54.0231 617.6336)">
    </a>
  </g>
  <g>
    <path class="numst4" d="M155,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4S155,499.3,155,528.3z"/>

      <a data-toggle="modal" href="#histogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HistogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 54.0266 479.7274)">
    </a>
  </g>
  <text transform="matrix(1 0 0 1 38.105 733.4967)"><tspan x="0" y="0" class="numst1 numst2">DENSITY</tspan><tspan x="21.2" y="13" class="numst1 numst2">PLOT</tspan></text>
  <text transform="matrix(1 0 0 1 14.8321 595.5875)" class="numst1 numst2">HISTOGRAM</text>

  <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Very simple dataset with only one column composed by numbers</em><br><br><img width='150' height='250' class='img-fluid' src='img/table/OneNum.png' alt=''><br><br></div>">
    <polygon class="numst3" points="60.9,137.5 102.6,113.4 144.3,137.5 144.3,185.7 102.6,209.8 60.9,185.7  "/>
    <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="0" y="0" class="numst4 numst5 numst6">ONE</tspan><tspan x="-17.2" y="16.8" class="numst4 numst5 numst6">NUMERIC</tspan><tspan x="-17.6" y="33.6" class="numst4 numst5 numst6">VARIABLE</tspan></text>
  </g>

</g>
<g>
  <path class="numst0" d="M1333.5,113.4V70.9c-5.5-5.5-8.6-8.6-14.2-14.2H116.8c-5.5,5.5-8.6,8.6-14.2,14.2v42.5"/>
  <line class="numst0" x1="570.8" y1="113.4" x2="570.8" y2="56.7"/>
  <line class="numst0" x1="1044.8" y1="113.4" x2="1044.8" y2="56.7"/>
  <line class="numst0" x1="754.1" y1="56.7" x2="754.1" y2="0"/>
</g>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="-15" y="640"><a class="mystory" xlink:href="story/OneNum.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="225" y="800"><a class="mystory" xlink:href="story/TwoNum.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="375" y="920"><a class="mystory" xlink:href="story/TwoNum.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="565" y="800"><a class="mystory" xlink:href="story/TwoNumOrdered.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="830" y="920"><a class="mystory" xlink:href="story/ThreeNum.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1050" y="920"><a class="mystory" xlink:href="story/OneCatSevOrderedNum.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1270" y="1340"><a class="mystory" xlink:href="story/SeveralNum.html">Story</a></tspan></text>

</div>











<!-- Categoric only -->
<div id="cat" class="tree" style="text-align:center;">
  <svg version="1.1" id="Numeric_copy" width="80%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1582.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
  <style type="text/css">
    .catst0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .catst1{fill:#808285;}
    .catst2{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .catst3{fill:none;stroke:#808285;stroke-width:3;stroke-miterlimit:10;}
    .catst4{font-family:'Lato-Regular';}
    .catst5{font-size:13px;}
    .catst6{font-family:'OpenSans-Semibold';}
    .catst7{font-size:14px;}
    .catst8{font-size:11px;}
  </style>
  <g id="Geo">
  </g>
  <g id="Time">
  </g>
  <g id="Categorical">
    <g>
      <line class="catst0" x1="1271.1" y1="330.6" x2="1271.1" y2="1079.9"/>
      <text transform="matrix(1 0 0 1 1197.7676 1147.23)" class="catst4 catst5">HEATMAP</text>
      <g>
        <path class="catst1" d="M1323.5,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1323.5,1051,1323.5,1079.9z"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 1222.5334 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1210.5403 1009.3174)" class="catst4 catst5">SANKEY</text>
      <g>
        <circle class="catst1" cx="1271.1" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 1222.5327 893.4599)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1235.1226 871.4072)" class="catst4 catst5">ARC</text>
      <g>
        <circle class="catst1" cx="1271.1" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#arc"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ArcSmal.png"  transform="matrix(0.8522 0 0 0.8522 1222.5334 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1213.5039 733.498)" class="catst4 catst5">CHORD</text>
      <g>
        <circle class="catst1" cx="1271.1" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#chord"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ChordSmall.png"  transform="matrix(0.8522 0 0 0.8522 1222.5334 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1194.8169 595.5889)" class="catst4 catst5">NETWORK</text>
      <g>
        <path class="catst1" d="M1323.5,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1323.5,499.3,1323.5,528.3z"/>

          <a data-toggle="modal" href="#network"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/NetworkSmall.png"  transform="matrix(0.8522 0 0 0.8522 1222.533 479.7299)">
        </image></a>
      </g>
      <g>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Two independent lists</em><br><br><img width='250' height='250' class='img-fluid' src='img/table/AdjacencyNoEdgeValue.png' alt=''><br><br></div>">
                <polygon class="catst2" points="1229.4,258.3 1271.1,234.2 1312.8,258.3 1312.8,306.5 1271.1,330.6 1229.4,306.5       "/>
                <text transform="matrix(1 0 0 1 1234.9928 286.1364)" class="catst1 catst6 catst5">ADJACENCY</text>
        </g>
      </g>
      <path class="catst0" d="M1096.3,185.7h160.6c5.5,5.5,8.6,8.6,14.2,14.2v32.5"/>
    </g>
    <g>
      <line class="catst0" x1="1126.8" y1="330.6" x2="1126.8" y2="1461.8"/>
      <text transform="matrix(1 0 0 1 1067.2417 1560.9492)"><tspan x="0" y="0" class="catst4 catst5">SANKEY</tspan><tspan x="-10.8" y="13" class="catst4 catst5">DIAGRAM</tspan></text>
      <g>
        <circle class="catst1" cx="1126.8" cy="1493.7" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1964 1445.1003)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1072.3779 1423.0479)"><tspan x="0" y="0" class="catst4 catst5">SPIDER</tspan><tspan x="11.5" y="13" class="catst4 catst5">PLOT</tspan></text>
      <g>
        <circle class="catst1" cx="1126.8" cy="1355.8" r="52.4"/>

          <a data-toggle="modal" href="#spider"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SpiderSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 1307.1903)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1055.1279 1285.1382)"><tspan x="0" y="0" class="catst4 catst5">PARALLEL</tspan><tspan x="28.5" y="13" class="catst4 catst5">PLOT</tspan></text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.2972 18.1419)" class="catst1" cx="1126.8" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#parallel"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Parallel1Small.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 1169.2803)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1057.7983 1147.23)"><tspan x="0" y="0" class="catst4 catst5">STACKED</tspan><tspan x="0.3" y="13" class="catst4 catst5">BARPLOT</tspan></text>
      <g>
        <path class="catst1" d="M1179.2,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1179.2,1051,1179.2,1079.9z"/>

          <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StackedSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 1031.3704)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1053.4053 1009.3174)"><tspan x="0" y="0" class="catst4 catst5">GROUPED</tspan><tspan x="4.9" y="13" class="catst4 catst5">BARPLOT</tspan></text>
      <g>
        <circle class="catst1" cx="1126.8" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="472" height="472" xlink:href="img/section/GroupedRedBig.png"  transform="matrix(0.2058 0 0 0.2058 1078.1971 893.4603)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1056.3232 871.4072)" class="catst4 catst5">LOLLIPOP</text>
      <g>
        <circle class="catst1" cx="1126.8" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#lollipop"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LollipopSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 755.5504)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1053.626 733.498)" class="catst4 catst5">HEATMAP</text>
      <g>
        <circle class="catst1" cx="1126.8" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 617.6404)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1053.4053 595.5889)"><tspan x="0" y="0" class="catst4 catst5">GROUPED</tspan><tspan x="7.3" y="13" class="catst4 catst5">SCATTER</tspan></text>
      <g>
        <path class="catst1" d="M1179.2,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1179.2,499.3,1179.2,528.3z"/>

          <a data-toggle="modal" href="#scatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterGroupSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 479.7304)">
        </image></a>
      </g>
      <g>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Two categoric variable organized in subgroups. It means that every combination of both variable is possible. Example: each people observed is a male or female (var 1), and </em><br><br><img width='250' height='250' class='img-fluid' src='img/table/TwoCatSubgroup.png' alt=''><br><br></div>">
                <polygon class="catst2" points="1085,258.3 1126.8,234.2 1168.5,258.3 1168.5,306.5 1126.8,330.6 1085,306.5       "/>
                <text transform="matrix(1 0 0 1 1088.5372 286.4232)" class="catst1 catst6 catst7">SUBGROUP</text>
        </g>
      </g>
      <path class="catst0" d="M1126.8,232.3v-8.4c-5.5-5.5-8.6-8.6-14.2-14.2h-58"/>
    </g>
    <g>
      <line class="catst0" x1="982.4" y1="330.6" x2="982.4" y2="1079.9"/>
      <text transform="matrix(1 0 0 1 877.4136 1147.23)" class="catst4 catst5">DENDROGRAM</text>
      <g>
        <path class="catst1" d="M1034.9,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1034.9,1051,1034.9,1079.9z"/>

          <a data-toggle="modal" href="#dendrogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DendrogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 933.8591 1031.3691)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 913.9634 1009.3174)" class="catst4 catst5">BARPLOT</text>
      <g>
        <circle class="catst1" cx="982.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BarSmall.png"  transform="matrix(0.8522 0 0 0.8522 933.8605 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 904.7007 871.4072)" class="catst4 catst5">SUNBURST</text>
      <g>
        <circle class="catst1" cx="982.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#sunburst"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SunburstSmall.png"  transform="matrix(0.8522 0 0 0.8522 933.8591 755.549)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 909.5435 733.498)"><tspan x="0" y="0" class="catst4 catst5">CIRCULAR</tspan><tspan x="5.4" y="13" class="catst4 catst5">PACKING</tspan></text>
      <g>
        <circle class="catst1" cx="982.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#circularpacking"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CircularPackingSmall.png"  transform="matrix(0.8522 0 0 0.8522 933.8605 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 912.3643 595.5889)" class="catst4 catst5">TREEMAP</text>
      <g>
        <path class="catst1" d="M1034.9,528.3c0,29-23.5,52.4-52.4,52.4S930,557.3,930,528.3c0-29,23.5-52.4,52.4-52.4
          S1034.9,499.3,1034.9,528.3z"/>

          <a data-toggle="modal" href="#treemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/TreeSmall.png"  transform="matrix(0.8522 0 0 0.8522 933.8605 479.7304)">
        </image></a>
      </g>
      <g>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>The second cat. variable is nested in the first one. Each entity is separately identifiable but also part of a larger data organization. Example: World > Europe > Ireland > Dublin.</em><br><br><img width='250' height='250' class='img-fluid' src='img/table/TwoCatNested.png' alt=''><br><br></div>">
          <polygon class="catst2" points="940.7,258.3 982.4,234.2 1024.2,258.3 1024.2,306.5 982.4,330.6 940.7,306.5       "/>
          <text transform="matrix(1 0 0 1 956.1902 286.4235)" class="catst1 catst6 catst7">NESTED</text>
        </g>
      </g>
      <path class="catst0" d="M1054.6,209.8h-58c-5.5,5.5-8.6,8.6-14.2,14.2v8.4"/>
    </g>
    <g>
      <line class="catst0" x1="838.1" y1="330.6" x2="838.1" y2="528.3"/>
      <text transform="matrix(1 0 0 1 791.3831 595.5889)"><tspan x="0" y="0" class="catst4 catst5">VENN</tspan><tspan x="-24.7" y="13" class="catst4 catst5">DIAGRAM</tspan></text>
      <g>
        <path class="catst1" d="M890.5,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S890.5,499.3,890.5,528.3z"/>

          <a data-toggle="modal" href="#venn"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/VennSmall.png"  transform="matrix(0.8522 0 0 0.8522 789.5245 479.7304)">
        </image></a>
      </g>
      <g>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Two independent lists. Example: list of people playing football, and other of people playing ping pong. The usual goal is to represent the intersection between both lists.</em><br><br><img width='250' height='250' class='img-fluid' src='img/table/TwoIndepList.png' alt=''><br><br></div>">
          <polygon class="catst2" points="796.4,258.3 838.1,234.2 879.8,258.3 879.8,306.5 838.1,330.6 796.4,306.5 "/>
          <text transform="matrix(1 0 0 1 822.0057 269.6237)"><tspan x="0" y="0" class="catst1 catst6 catst7">TWO</tspan><tspan x="-22.9" y="15.8" class="catst1 catst6 catst8">INDEPENDENT</tspan><tspan x="-1.5" y="33.6" class="catst1 catst6 catst7">LISTS</tspan></text>
        </g>
      </g>
      <path class="catst0" d="M1012.9,185.7H852.3c-5.5,5.5-8.6,8.6-14.2,14.2v32.5"/>
    </g>
    <g>
      <polygon class="catst2" points="1012.9,137.5 1054.6,113.4 1096.3,137.5 1096.3,185.7 1054.6,209.8 1012.9,185.7     "/>
      <text transform="matrix(1 0 0 1 1026.7068 148.7982)"><tspan x="0" y="0" class="catst1 catst6 catst7">TWO OR</tspan><tspan x="-9.2" y="16.8" class="catst1 catst6 catst7">MORE CAT.</tspan><tspan x="-8.5" y="33.6" class="catst1 catst6 catst7">VARIABLES</tspan></text>
    </g>
    <g>
      <line class="catst0" x1="303.4" y1="209.9" x2="303.4" y2="1461.8"/>
      <text transform="matrix(1 0 0 1 231.5703 1560.9492)"><tspan x="0" y="0" class="catst4 catst5">CIRCULAR</tspan><tspan x="5.4" y="13" class="catst4 catst5">PACKING</tspan></text>
      <g>
        <circle class="catst1" cx="303.4" cy="1493.7" r="52.4"/>

          <a data-toggle="modal" href="#circularpacking"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CircularPackingSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 1445.1011)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 233.5542 1423.0479)" class="catst4 catst5">TREEMAP</text>
      <g>
        <circle class="catst1" cx="303.4" cy="1355.8" r="52.4"/>

          <a data-toggle="modal" href="#treemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/TreeSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 1307.1908)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 273.9126 1285.1382)" class="catst4 catst5">PIE</text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.4021 4.9987)" class="catst1" cx="303.4" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#pie"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/PieSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 1169.2806)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 216.2319 1147.23)" class="catst4 catst5">DOUGHNUT</text>
      <g>
        <path class="catst1" d="M355.9,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S355.9,1051,355.9,1079.9z"/>

          <a data-toggle="modal" href="#donut"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DougnutSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 250.9675 1009.3174)"><tspan x="0" y="0" class="catst4 catst5">WORD</tspan><tspan x="-3.3" y="13" class="catst4 catst5">CLOUD</tspan></text>
      <g>
        <circle class="catst1" cx="303.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#wordcloud"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/WordCloudSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 241.9199 871.4072)" class="catst4 catst5">WAFFLE</text>
      <g>
        <circle class="catst1" cx="303.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 232.7749 733.498)" class="catst4 catst5">LOLLIPOP</text>
      <g>
        <circle class="catst1" cx="303.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#lollipop"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LollipopSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 234.9516 595.5889)" class="catst4 catst5">BARPLOT</text>
      <g>
        <path class="catst1" d="M355.9,528.3c0,29-23.5,52.4-52.4,52.4S251,557.3,251,528.3c0-29,23.5-52.4,52.4-52.4
          S355.9,499.3,355.9,528.3z"/>

          <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BarSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8492 479.7304)">
        </image></a>
      </g>
      <g>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Very simple dataset with only one categoric variable</em><br><br><img width='120' height='200' class='img-fluid' src='img/table/OneCat.png' alt=''><br><br></div>">
          <polygon class="catst2" points="261.7,137.5 303.4,113.4 345.2,137.5 345.2,185.7 303.4,209.8 261.7,185.7       "/>
          <text transform="matrix(1 0 0 1 288.5234 148.7982)"><tspan x="0" y="0" class="catst1 catst6 catst7">ONE</tspan><tspan x="-22" y="15.8" class="catst1 catst6 catst8">CATEGORICAL</tspan><tspan x="-21.5" y="33.6" class="catst1 catst6 catst7">VARIABLES</tspan></text>
        </g>
      </g>
    </g>
    <g>
      <path class="catst0" d="M1054.6,113.4V70.9c-5.5-5.5-8.6-8.6-14.2-14.2H317.6c-5.5,5.5-8.6,8.6-14.2,14.2v42.5"/>
      <line class="catst3" x1="751.2" y1="56.7" x2="751.2" y2="0"/>
    </g>
  </g>
  <g id="Cat_And_Num">
  </g>
  <g id="Relational">
  </g>
  <g id="Numeric_copy">
  </g>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="264" y="1360"><a class="mystory" xlink:href="story/OneNumOneCat.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="705" y="520"><a class="mystory" xlink:href="story/SeveralIndepLists.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="850" y="1050"><a class="mystory" xlink:href="story/SevCatOneNumNestedOneObsPerGroup.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1090" y="1360"><a class="mystory" xlink:href="story/OneNumSevCatSubgroupOneObsPerGroup.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1155" y="1050"><a class="mystory" xlink:href="story/AdjacencyMatrix.html">Story</a></tspan></text>

  </svg>
</div>










<!-- Numeric and cat -->
<div id="catnum" class="tree" style="text-align:center;">
  <svg version="1.1" id="Numeric_copy" width="80%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1582.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
  <style type="text/css">
    .catnumst0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .catnumst1{fill:#808285;}
    .st2{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .catnumst3{fill:none;stroke:#808285;stroke-width:3;stroke-miterlimit:10;}
    .catnumst4{font-family:'Lato-Regular';}
    .catnumst5{font-size:13px;}
    .catnumst6{font-family:'OpenSans-Semibold';}
    .catnumst7{font-size:14px;}
  </style>
  <g id="Geo">
  </g>
  <g id="Time">
  </g>
  <g id="Categorical">
  </g>
  <g id="Cat_And_Num">
    <g>
      <line class="catnumst0" x1="1412.9" y1="330.6" x2="1412.9" y2="1079.9"/>
      <text transform="matrix(1 0 0 1 1339.599 1147.23)" class="catnumst4 catnumst5">HEATMAP</text>
      <g>
        <path class="catnumst1" d="M1465.4,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1465.4,1051,1465.4,1079.9z"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 1364.3644 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1352.3705 1009.3174)" class="catnumst4 catnumst5">SANKEY</text>
      <g>
        <circle class="catnumst1" cx="1412.9" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 1364.3636 893.4599)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1376.9535 871.4072)" class="catnumst4 catnumst5">ARC</text>
      <g>
        <circle class="catnumst1" cx="1412.9" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#arc"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ArcSmal.png"  transform="matrix(0.8522 0 0 0.8522 1364.3644 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1355.3348 733.498)" class="catnumst4 catnumst5">CHORD</text>
      <g>
        <circle class="catnumst1" cx="1412.9" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#chord"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ChordSmall.png"  transform="matrix(0.8522 0 0 0.8522 1364.3644 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1336.6471 595.5889)" class="catnumst4 catnumst5">NETWORK</text>
      <g>
        <path class="catnumst1" d="M1465.4,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1465.4,499.3,1465.4,528.3z"/>

          <a data-toggle="modal" href="#network"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/NetworkSmall.png"  transform="matrix(0.8522 0 0 0.8522 1364.3639 479.7299)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A rectangular matrix that gives the relationship between each pair of sample.</em><br><br><img width='380' height='700' class='img-fluid' src='img/table/AdjacencySquare.png' alt=''><br><br></div>">
        <polygon class="st2" points="1371.2,258.3 1412.9,234.2 1454.7,258.3 1454.7,306.5 1412.9,330.6 1371.2,306.5      "/>
        <text transform="matrix(1 0 0 1 1376.8256 286.1364)" class="catnumst1 catnumst6 catnumst5">ADJACENCY</text>
      </g>
      <path class="catnumst0" d="M1234.1,185.7h164.7c5.5,5.5,8.6,8.6,14.2,14.2v34.4"/>
    </g>
    <g>
      <line class="catnumst0" x1="1257.9" y1="451.4" x2="1257.9" y2="666.2"/>
      <text transform="matrix(1 0 0 1 1204.2867 733.498)" class="catnumst4 catnumst5">VIOLIN</text>
      <g>
        <circle class="catnumst1" cx="1257.9" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 1209.3574 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1187.5616 595.5889)" class="catnumst4 catnumst5">BOXPLOT</text>
      <g>
        <path class="catnumst1" d="M1310.4,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1310.4,499.3,1310.4,528.3z"/>

          <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 1209.3574 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Categoric variables provide information of the hierarchy. Several values are available for each leaf.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/OneNumSevCatNestedSevObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="1216.2,379.1 1257.9,355 1299.7,379.1 1299.7,427.3 1257.9,451.4 1216.2,427.3      "/>
        <text transform="matrix(1 0 0 1 1229.0183 390.4491)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">SEVERAL</tspan><tspan x="-1.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="4.3" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M1234.1,306.5h9.7c5.5,5.5,8.6,8.6,14.2,14.2V355"/>
    </g>
    <g>
      <line class="catnumst0" x1="1126.8" y1="451.4" x2="1126.8" y2="1073.9"/>
      <text transform="matrix(1 0 0 1 1053.6864 1147.23)"><tspan x="0" y="0" class="catnumst4 catnumst5">CIRCULAR</tspan><tspan x="5.4" y="13" class="catnumst4 catnumst5">PACKING</tspan></text>
      <g>
        <path class="catnumst1" d="M1179.2,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1179.2,1051,1179.2,1079.9z"/>

          <a data-toggle="modal" href="#circularpacking"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CircularPackingSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1982 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1056.7013 1009.3174)" class="catnumst4 catnumst5">TREEMAP</text>
      <g>
        <circle class="catnumst1" cx="1126.8" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#treemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/TreeSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1982 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1056.0907 871.4072)" class="catnumst4 catnumst5">SUNBURST</text>
      <g>
        <circle class="catnumst1" cx="1126.8" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#sunburst"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SunburstSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1968 755.549)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1021.9467 733.498)" class="catnumst4 catnumst5">DENDROGRAM</text>
      <g>
        <circle class="catnumst1" cx="1126.8" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#dendrogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DendrogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1968 617.6389)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1058.3004 595.5889)" class="catnumst4 catnumst5">BARPLOT</text>
      <g>
        <path class="catnumst1" d="M1179.2,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1179.2,499.3,1179.2,528.3z"/>

          <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BarSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1982 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Categoric variables provide information of the hierarchy. One value only for each leaf.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/OneNumSevCatNestedOneObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="1085,379.1 1126.8,355 1168.5,379.1 1168.5,427.3 1126.8,451.4 1085,427.3      "/>
        <text transform="matrix(1 0 0 1 1111.8727 390.4493)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE</tspan><tspan x="-15.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="-9.7" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M1150.6,306.5h-9.7c-5.5,5.5-8.6,8.6-14.2,14.2V355"/>
    </g>
    <g>
      <g>
        <polygon class="st2" points="1150.6,258.3 1192.4,234.2 1234.1,258.3 1234.1,306.5 1192.4,330.6 1150.6,306.5      "/>
        <text transform="matrix(1 0 0 1 1166.1084 286.4235)" class="catnumst1 catnumst6 catnumst7">NESTED</text>
      </g>
      <line class="catnumst0" x1="1192.4" y1="234.2" x2="1192.4" y2="209.8"/>
    </g>
    <g>
      <line class="catnumst0" x1="971.8" y1="451.4" x2="971.8" y2="666.2"/>
      <text transform="matrix(1 0 0 1 918.122 733.498)" class="catnumst4 catnumst5">VIOLIN</text>
      <g>
        <circle class="catnumst1" cx="971.8" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 923.1929 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 901.3969 595.5889)" class="catnumst4 catnumst5">BOXPLOT</text>
      <g>
        <path class="catnumst1" d="M1024.2,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1024.2,499.3,1024.2,528.3z"/>

          <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 923.1929 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Categoric variables provide several ways to group samples. For each combination of groups, several observation are available.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/OneNumSevCatSubgroupSevObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="930,379.1 971.8,355 1013.5,379.1 1013.5,427.3 971.8,451.4 930,427.3      "/>
        <text transform="matrix(1 0 0 1 942.8537 390.4491)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">SEVERAL</tspan><tspan x="-1.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="4.3" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M947.9,306.5h9.7c5.5,5.5,8.6,8.6,14.2,14.2V355"/>
    </g>
    <g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Categoric variables provide several ways to group samples. For each combination of groups, one observation is available only.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/OneNumSevCatSubgroupOneObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="798.9,379.1 840.6,355 882.3,379.1 882.3,427.3 840.6,451.4 798.9,427.3      "/>
        <text transform="matrix(1 0 0 1 825.7084 390.4493)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE</tspan><tspan x="-15.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="-9.7" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M798.9,427.3h-33.5c-5.5,5.5-8.6,8.6-14.2,14.2l0,34.4"/>
      <path class="catnumst0" d="M864.5,306.5h-9.7c-5.5,5.5-8.6,8.6-14.2,14.2V355"/>
    </g>
    <g>
      <g>
        <polygon class="st2" points="864.5,258.3 906.2,234.2 947.9,258.3 947.9,306.5 906.2,330.6 864.5,306.5      "/>
        <text transform="matrix(1 0 0 1 867.9531 286.4235)" class="catnumst1 catnumst6 catnumst7">SUBGROUP</text>
      </g>
      <path class="catnumst0" d="M1150.6,185.7H920.4c-5.5,5.5-8.6,8.6-14.2,14.2v34.4"/>
    </g>
    <g>
      <polygon class="st2" points="1150.6,137.5 1192.4,113.4 1234.1,137.5 1234.1,185.7 1192.4,209.8 1150.6,185.7    "/>
      <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 1163.2852 149.1525)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">SEVERAL</tspan><tspan x="14" y="16.8" class="catnumst1 catnumst6 catnumst7">CAT.</tspan><tspan x="-6.9" y="33.6" class="catnumst1 catnumst6 catnumst7">ONE NUM.</tspan></text>
    </g>
    <g>
      <line class="catnumst0" x1="751.2" y1="532.8" x2="751.2" y2="1493.7"/>
      <text transform="matrix(1 0 0 1 691.6528 1560.9604)"><tspan x="0" y="0" class="catnumst4 catnumst5">SANKEY</tspan><tspan x="-10.8" y="13" class="catnumst4 catnumst5">DIAGRAM</tspan></text>
      <g>
        <circle class="catnumst1" cx="751.2" cy="1493.7" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6068 1445.1003)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 696.7885 1423.0479)"><tspan x="0" y="0" class="catnumst4 catnumst5">SPIDER</tspan><tspan x="11.5" y="13" class="catnumst4 catnumst5">PLOT</tspan></text>
      <g>
        <circle class="catnumst1" cx="751.2" cy="1355.8" r="52.4"/>

          <a data-toggle="modal" href="#spider"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SpiderSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6075 1307.1909)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 679.5385 1285.1382)"><tspan x="0" y="0" class="catnumst4 catnumst5">PARALLEL</tspan><tspan x="28.5" y="13" class="catnumst4 catnumst5">PLOT</tspan></text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.345 12.1464)" class="catnumst1" cx="751.2" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#parallel"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Parallel1Small.png"  transform="matrix(0.8522 0 0 0.8522 702.6075 1169.2806)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 682.2094 1147.23)"><tspan x="0" y="0" class="catnumst4 catnumst5">STACKED</tspan><tspan x="0.3" y="13" class="catnumst4 catnumst5">BARPLOT</tspan></text>
      <g>
        <path class="catnumst1" d="M803.6,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S803.6,1051,803.6,1079.9z"/>

          <a data-toggle="modal" href="#stackedbar"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StackedSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6076 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 677.8149 1009.3174)"><tspan x="0" y="0" class="catnumst4 catnumst5">GROUPED</tspan><tspan x="4.9" y="13" class="catnumst4 catnumst5">BARPLOT</tspan></text>
      <g>
        <circle class="catnumst1" cx="751.2" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#groupedbarplot"><image class="graphtypelogo" style="overflow:visible;" width="472" height="472" xlink:href="img/section/GroupedRedBig.png"  transform="matrix(0.2058 0 0 0.2058 702.6076 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 680.7338 871.4072)" class="catnumst4 catnumst5">LOLLIPOP</text>
      <g>
        <circle class="catnumst1" cx="751.2" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#lollipop"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LollipopSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6076 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 678.0366 733.498)" class="catnumst4 catnumst5">HEATMAP</text>
      <g>
        <circle class="catnumst1" cx="751.2" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6076 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 677.8149 595.5889)"><tspan x="0" y="0" class="catnumst4 catnumst5">GROUPED</tspan><tspan x="7.3" y="13" class="catnumst4 catnumst5">SCATTER</tspan></text>
      <g>
        <path class="catnumst1" d="M803.6,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S803.6,499.3,803.6,528.3z"/>

          <a data-toggle="modal" href="#scatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterGroupSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6075 479.7304)">
        </image></a>
      </g>
      <path class="catnumst0" d="M751.2,475.9l0-34.4c-5.5-5.5-8.6-8.6-14.2-14.2h-61.1c-5.5-5.5-8.6-8.6-14.2-14.2v-82.6"/>
    </g>
    <g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A set of several numeric variables giving features for each sample. One row only per sample.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/SevNumOneCatOneObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="620,258.3 661.8,234.2 703.5,258.3 703.5,306.5 661.8,330.6 620,306.5      "/>
        <text transform="matrix(1 0 0 1 646.8576 269.6234)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE</tspan><tspan x="-21.5" y="16.8" class="catnumst1 catnumst6 catnumst7">VALUE PER</tspan><tspan x="-9.7" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M572.3,185.7h75.3c5.5,5.5,8.6,8.6,14.2,14.2v34.4"/>
    </g>
    <g>
      <line class="catnumst0" x1="530.6" y1="330.6" x2="530.6" y2="1079.9"/>
      <text transform="matrix(1 0 0 1 439.4867 1147.23)"><tspan x="0" y="0" class="catnumst4 catnumst5">CONNECTED</tspan><tspan x="24.7" y="13" class="catnumst4 catnumst5">SCATTER</tspan></text>
      <g>
        <path class="catnumst1" d="M582.9,1079.9c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          C559.4,1027.5,582.9,1051,582.9,1079.9z"/>

          <a data-toggle="modal" href="#connectedscatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterConnectedSmall.png"  transform="matrix(0.8522 0 0 0.8522 481.8674 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 492.1364 1009.3174)"><tspan x="0" y="0" class="catnumst4 catnumst5">LINE</tspan><tspan x="-4.8" y="13" class="catnumst4 catnumst5">PLOT</tspan></text>
      <g>
        <circle class="catnumst1" cx="530.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#line"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LineSmall.png"  transform="matrix(0.8522 0 0 0.8522 481.8675 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 468.8339 871.4072)"><tspan x="0" y="0" class="catnumst4 catnumst5">STREAM</tspan><tspan x="7.1" y="13" class="catnumst4 catnumst5">GRAPH</tspan></text>
      <g>
        <circle class="catnumst1" cx="530.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#streamgraph"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StreamSmall.png"  transform="matrix(0.8522 0 0 0.8522 481.8674 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 486.6313 733.498)" class="catnumst4 catnumst5">AREA</text>
      <g>
        <circle class="catnumst1" cx="530.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#area"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/AreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 481.8674 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 461.6645 595.5889)"><tspan x="0" y="0" class="catnumst4 catnumst5">STACKED</tspan><tspan x="25" y="13" class="catnumst4 catnumst5">AREA</tspan></text>
      <g>
        <path class="catnumst1" d="M582.9,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          C559.4,475.9,582.9,499.3,582.9,528.3z"/>

          <a data-toggle="modal" href="#stackedarea"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StackedAreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 481.8675 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A set of several numeric variables giving features for each sample. One of the variable is ordered and will be used for the X axis most of the time.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/SevNumOneCatOrdered.png' alt=''><br><br></div>">
        <polygon class="st2" points="488.9,258.3 530.6,234.2 572.3,258.3 572.3,306.5 530.6,330.6 488.9,306.5      "/>
        <text transform="matrix(1 0 0 1 497.2838 278.0238)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">A NUM. IS</tspan><tspan x="0.8" y="16.8" class="catnumst1 catnumst6 catnumst7">ORDERED</tspan></text>
      </g>
      <line class="catnumst0" x1="530.6" y1="234.2" x2="530.6" y2="209.8"/>
    </g>
    <g>
      <line class="catnumst0" x1="399.4" y1="330.6" x2="399.4" y2="1217.9"/>
      <text transform="matrix(1 0 0 1 290.3998 1285.1382)" class="catnumst4 catnumst5">CORRELOGRAM</text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.3898 6.5314)" class="catnumst1" cx="399.4" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#correlogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CorrelogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 1169.2806)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 363.3949 1147.23)" class="catnumst4 catnumst5">PCA</text>
      <g>
        <path class="catnumst1" d="M451.9,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S451.9,1051,451.9,1079.9z"/>

          <a data-toggle="modal" href="#pca"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/PCAsmall.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 345.7929 1009.3174)" class="catnumst4 catnumst5">VIOLIN</text>
      <g>
        <circle class="catnumst1" cx="399.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 329.2694 871.4072)" class="catnumst4 catnumst5">BOXPLOT</text>
      <g>
        <circle class="catnumst1" cx="399.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 371.4545 733.498)"><tspan x="0" y="0" class="catnumst4 catnumst5">2D</tspan><tspan x="-36.4" y="13" class="catnumst4 catnumst5">DENSITY</tspan></text>
      <g>
        <circle class="catnumst1" cx="399.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#density2d"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/2dDensitySmall.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 326.0717 595.5889)"><tspan x="0" y="0" class="catnumst4 catnumst5">GROUPED</tspan><tspan x="7.3" y="13" class="catnumst4 catnumst5">SCATTER</tspan></text>
      <g>
        <path class="catnumst1" d="M451.9,528.3c0,29-23.5,52.4-52.4,52.4S347,557.3,347,528.3c0-29,23.5-52.4,52.4-52.4
          S451.9,499.3,451.9,528.3z"/>

          <a data-toggle="modal" href="#scatter"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ScatterGroupSmall.png"  transform="matrix(0.8522 0 0 0.8522 350.8636 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A set of several numeric variables giving features for each sample. Several obseervation are available per sample.</em><br><br><img width='280' height='500' class='img-fluid' src='img/table/SevNumOneCatNoOrder.png' alt=''><br><br></div>">
        <polygon class="st2" points="357.7,258.3 399.4,234.2 441.2,258.3 441.2,306.5 399.4,330.6 357.7,306.5      "/>
        <text transform="matrix(1 0 0 1 388.4445 278.0236)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">NO</tspan><tspan x="-12.5" y="16.8" class="catnumst1 catnumst6 catnumst7">ORDER</tspan></text>
      </g>
      <path class="catnumst0" d="M488.9,185.7h-75.3c-5.5,5.5-8.6,8.6-14.2,14.2v34.4"/>
    </g>
    <g>
      <polygon class="st2" points="488.9,137.5 530.6,113.4 572.3,137.5 572.3,185.7 530.6,209.8 488.9,185.7    "/>
      <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 500.699 149.1627)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE CAT</tspan><tspan x="0.8" y="16.8" class="catnumst1 catnumst6 catnumst7">SEVERAL</tspan><tspan x="12.6" y="33.6" class="catnumst1 catnumst6 catnumst7">NUM</tspan></text>
    </g>
    <g>
      <line class="catnumst0" x1="220.6" y1="330.6" x2="220.6" y2="1079.9"/>
      <text transform="matrix(1 0 0 1 132.623 1147.23)" class="catnumst4 catnumst5">HISTOGRAM</text>
      <g>
        <path class="catnumst1" d="M273,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4S273,1051,273,1079.9z"
          />

          <a data-toggle="modal" href="#histogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HistogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 172.0132 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 156.2304 1009.3174)" class="catnumst4 catnumst5">DENSITY</text>
      <g>
        <circle class="catnumst1" cx="220.6" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#density"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DensitySmall.png"  transform="matrix(0.8522 0 0 0.8522 172.0132 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 171.557 871.4072)"><tspan x="0" y="0" class="catnumst4 catnumst5">RIDGE</tspan><tspan x="10.9" y="13" class="catnumst4 catnumst5">LINE</tspan></text>
      <g>
        <circle class="catnumst1" cx="220.6" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#ridgeline"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/JoyplotSmall.png"  transform="matrix(0.8522 0 0 0.8522 172.0132 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 166.9428 733.498)" class="catnumst4 catnumst5">VIOLIN</text>
      <g>
        <circle class="catnumst1" cx="220.6" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 172.0132 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 150.2179 595.5889)" class="catnumst4 catnumst5">BOXPLOT</text>
      <g>
        <path class="catnumst1" d="M273,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4S273,499.3,273,528.3z"
          />

          <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 172.0132 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>One numeric variable is provided, with several values per group.</em><br><br><img width='200' height='350' class='img-fluid' src='img/table/OneNumOneCatSevObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="178.9,258.3 220.6,234.2 262.3,258.3 262.3,306.5 220.6,330.6 178.9,306.5      "/>
        <text transform="matrix(1 0 0 1 191.6728 269.6234)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">SEVERAL</tspan><tspan x="-1.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="4.3" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M196.7,185.7h9.7c5.5,5.5,8.6,8.6,14.2,14.2v34.4"/>
    </g>
    <g>
      <line class="catnumst0" x1="89.4" y1="330.6" x2="89.4" y2="1461.8"/>
      <text transform="matrix(1 0 0 1 28.7607 1560.9604)" class="catnumst4 catnumst5">WAFFLE</text>
      <g>
        <g>
          <circle class="catnumst1" cx="89.4" cy="1493.7" r="52.4"/>
        </g>

          <a data-toggle="modal" href="#waffle"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 1445.1011)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 16.7367 1423.0503)"><tspan x="0" y="0" class="catnumst4 catnumst5">CIRCULAR</tspan><tspan x="5.4" y="13" class="catnumst4 catnumst5">PACKING</tspan></text>
      <g>
        <circle class="catnumst1" cx="89.4" cy="1355.8" r="52.4"/>

          <a data-toggle="modal" href="#circularpacking"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CircularPackingSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 1307.1909)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 19.3564 1285.1401)" class="catnumst4 catnumst5">TREEMAP</text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596312e-02 1.596312e-02 0.9999 -19.4293 1.5827)" class="catnumst1" cx="89.4" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#treemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/TreeSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 1169.2806)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 36.7763 1147.23)"><tspan x="0" y="0" class="catnumst4 catnumst5">WORD</tspan><tspan x="-3.3" y="13" class="catnumst4 catnumst5">CLOUD</tspan></text>
      <g>
        <path class="catnumst1" d="M141.9,1079.9c0,29-23.5,52.4-52.4,52.4S37,1108.9,37,1079.9c0-29,23.5-52.4,52.4-52.4
          S141.9,1051,141.9,1079.9z"/>

          <a data-toggle="modal" href="#wordcloud"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/WordCloudSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8528 1031.3705)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 59.9157 1009.3193)" class="catnumst4 catnumst5">PIE</text>
      <g>
        <circle class="catnumst1" cx="89.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#pie"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/PieSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 893.4606)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 2.6317 871.4092)" class="catnumst4 catnumst5">DOUGHNUT</text>
      <g>
        <circle class="catnumst1" cx="89.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#donut"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DougnutSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 18.7782 733.499)" class="catnumst4 catnumst5">LOLLIPOP</text>
      <g>
        <circle class="catnumst1" cx="89.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#lollipop"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LollipopSmall.png"  transform="matrix(0.8522 0 0 0.8522 40.8529 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 19.057 595.5889)" class="catnumst4 catnumst5">BOXPLOT</text>
      <g>
        <path class="catnumst1" d="M141.9,528.3c0,29-23.5,52.4-52.4,52.4S37,557.3,37,528.3c0-29,23.5-52.4,52.4-52.4S141.9,499.3,141.9,528.3
          z"/>

          <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 40.8528 479.7304)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>One numeric variable is provided for each entity of a categoric variable.</em><br><br><img width='200' height='350' class='img-fluid' src='img/table/OneNumOneCatOneObsPerGroup.png' alt=''><br><br></div>">
        <polygon class="st2" points="47.7,258.3 89.4,234.2 131.2,258.3 131.2,306.5 89.4,330.6 47.7,306.5      "/>
        <text transform="matrix(1 0 0 1 74.5275 269.6234)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE</tspan><tspan x="-15.5" y="16.8" class="catnumst1 catnumst6 catnumst7">OBS. PER</tspan><tspan x="-9.7" y="33.6" class="catnumst1 catnumst6 catnumst7">GROUP</tspan></text>
      </g>
      <path class="catnumst0" d="M113.3,185.7h-9.7c-5.5,5.5-8.6,8.6-14.2,14.2v34.4"/>
    </g>
    <g>
      <polygon class="st2" points="113.3,137.5 155,113.4 196.7,137.5 196.7,185.7 155,209.8 113.3,185.7    "/>
      <text transform="matrix(1 0 0 1 119.2262 157.1979)"><tspan x="0" y="0" class="catnumst1 catnumst6 catnumst7">ONE NUM.</tspan><tspan x="4.1" y="16.8" class="catnumst1 catnumst6 catnumst7">ONE CAT.</tspan></text>
    </g>
    <g>
      <line class="catnumst0" x1="530.6" y1="113.4" x2="530.6" y2="56.7"/>
      <path class="catnumst0" d="M155,113.4V72.6c6.2-6.2,9.7-9.7,15.9-15.9h1005.6c6.2,6.2,9.7,9.7,15.9,15.9v40.8"/>
      <line class="catnumst3" x1="751.2" y1="0" x2="751.2" y2="56.7"/>
    </g>
  </g>
  <g id="Relational">
  </g>
  <g id="Numeric_copy">
  </g>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="50" y="1360"><a class="mystory" xlink:href="story/OneNumOneCat.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="90" y="1045"><a class="mystory" xlink:href="story/OneNumOneCatSeveralObs.html">Story</a></tspan></text>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="275" y="1200"><a class="mystory" xlink:href="story/OneNumSevCatSubgroupOneObsPerGroup.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="410" y="1045"><a class="mystory" xlink:href="story/OneCatSevOrderedNum.html">Story</a></tspan></text>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="715" y="1360"><a class="mystory" xlink:href="story/OneNumSevCatSubgroupOneObsPerGroup.html">Story</a></tspan></text>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="855" y="630"><a class="mystory" xlink:href="story/OneNumSevCatSubgroupSevObsPerGroup.html">Story</a></tspan></text>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="990" y="1060"><a class="mystory" xlink:href="story/SevCatOneNumNestedOneObsPerGroup.html">Story</a></tspan></text>
<!--<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1140" y="630"><a class="mystory" xlink:href="story/12_NestedSeveralValue.html">Story</a></tspan></text>-->

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1280" y="1060"><a class="mystory" xlink:href="story/AdjacencyMatrix.html">Story</a></tspan></text>

  </svg>

</div>








<!-- Geographic -->
<div id="geo" class="tree" style="text-align:center;">
  <svg version="1.1" id="Numeric_copy" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 400 1508.3 802.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
  <style type="text/css">
    .geost0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .geost1{font-family:'Lato-Regular';}
    .geost2{font-size:13px;}
    .geost3{fill:#808285;}
    .geost4{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .geost5{fill:none;stroke:#808285;stroke-width:3;stroke-miterlimit:10;}
  </style>
  <g id="Geo">
    <g>
      <g>
        <line class="geost0" x1="751.2" y1="1109.1" x2="751.2" y2="0"/>
      </g>
      <text transform="matrix(1 0 0 1 691.4728 1147.23)"><tspan x="0" y="0" class="geost1 geost2">BUBBLE</tspan><tspan x="20.3" y="13" class="geost1 geost2">MAP</tspan></text>
      <g>
        <path class="geost3" d="M803.6,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S803.6,1051,803.6,1079.9z"/>
        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Requires the latitude and longitude of each bubble, plus a numeric value for their size. Note that a categoric variable can be added, to control the color of the bubble for example.</em><br><br><img width='420' height='800' class='img-fluid' src='img/table/Map/coordAndValue.png' alt=''><br><br></div>">
          <a data-toggle="modal" href="#bubblemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BubbleMapSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6083 1031.3705)"></image></a>
        </g>
      </g>
      <text transform="matrix(1 0 0 1 711.9479 1009.3174)"><tspan x="0" y="0" class="geost1 geost2">MAP</tspan><tspan x="-19.2" y="13" class="geost1 geost2">HEXBIN</tspan></text>
      <g>
        <circle class="geost3" cx="751.2" cy="942" r="52.4"/>

        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>A list of coordinates. It is then possible to cut the space in several hexagons and count the number of dot per hexagon.<br><br>OR<br><br>A numeric value per region. Each region will be represented by an hexagon, which shape file must be provided as well.</em><br><br><img width='970' height='1350' class='img-fluid' src='img/table/Map/hexbin.png' alt=''><br><br></div>">
          <a data-toggle="modal" href="#hexbinmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/MapHexbinSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6083 893.4605)"></image></a>
        </g>
      </g>
      <text transform="matrix(1 0 0 1 656.9191 871.4072)" class="geost1 geost2">CHOROPLETH</text>
      <g>
        <circle class="geost3" cx="751.2" cy="804.1" r="52.4"/>

        <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Requires a value (most often a numeric value) for each region to color. More over, you need the boundary coordinates of these regions.</em><br><br><img width='270' height='550' class='img-fluid' src='img/table/Map/RegionValue.png' alt=''><br><br></div>">
          <a data-toggle="modal" href="#choropleth"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ChoroplethSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6083 755.5505)"></image></a>
        </g>
      </g>
      <text transform="matrix(1 0 0 1 660.4225 733.498)"><tspan x="-8" y="0" class="geost1 geost2">CONNECTION</tspan><tspan x="50.5" y="13" class="geost1 geost2">MAP</tspan></text>
      <g>
        <circle class="geost3" cx="751.2" cy="666.2" r="52.4"/>

       <g data-toggle="tooltip" data-html="true" data-placement="left" offset='10 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Requires the GPS coordinates of both the origin and the end of the connection. It is possible to provide a value for this connection as well.</em><br><br><img width='670' height='1250' class='img-fluid' src='img/table/Map/coordStartEnd.png' alt=''><br><br></div>">
          <a data-toggle="modal" href="#connection"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ConnectedMapSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6083 617.6404)"></image></a>
        </g>
      </g>
      <text transform="matrix(1 0 0 1 711.9479 595.5889)" class="geost1 geost2">MAP</text>
      <g>
        <path class="geost3" d="M803.6,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S803.6,499.3,803.6,528.3z"/>

          <a data-toggle="modal" href="#map"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/MapSmall.png"  transform="matrix(0.8522 0 0 0.8522 702.6083 479.7304)">
        </image></a>
      </g>
    </g>
  </g>
  <g id="Time">
  </g>
  <g id="Categorical">
  </g>
  <g id="Cat_And_Num">
  </g>
  <g id="Relational">
  </g>
  <g id="Numeric_copy">
  </g>

  <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="720" y="530"><a class="mystory" xlink:href="story/MapConnection.html">Story</a></tspan></text>
  <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="720" y="670"><a class="mystory" xlink:href="story/RegionWithValue.html">Story</a></tspan></text>
  <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="720" y="810"><a class="mystory" xlink:href="story/GPSCoordWithoutValue.html">Story</a></tspan></text>
  <text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="720" y="950"><a class="mystory" xlink:href="story/GPSCoordWithValue.html">Story</a></tspan></text>

  </svg>
</div>









<!-- Time serie -->
<div id="time" class="tree" style="text-align:center;">
    <svg version="1.1" id="Numeric_copy" width="80%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1602.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
      <style type="text/css">
        .timest0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
        .timest1{fill:#808285;}
        .timest2{font-family:'Lato-Regular';}
        .timest3{font-size:13px;}
        .timest4{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
        .timest5{font-family:'OpenSans-Semibold';}
        .timest6{font-size:14px;}
        .timest7{fill:none;stroke:#808285;stroke-width:3;stroke-miterlimit:10;}
      </style>
      <g id="Geo">
      </g>
      <g id="Time">
        <g>
          <line class="timest0" x1="1015.5" y1="209.8" x2="1015.5" y2="1493.7"/>
          <text transform="matrix(1 0 0 1 953.6807 1560.949)"><tspan x="0" y="0" class="timest2 timest3">STREAM</tspan><tspan x="7.1" y="13" class="timest2 timest3">GRAPH</tspan></text>
          <g>
            <circle class="timest1" cx="1015.5" cy="1493.7" r="52.4"/>

              <a data-toggle="modal" href="#streamgraph"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StreamSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 1445.1011)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 947.8631 1423.0403)"><tspan x="0" y="0" class="timest2 timest3">S</tspan><tspan x="7.1" y="0" class="timest2 timest3">T</tspan><tspan x="13.8" y="0" class="timest2 timest3">A</tspan><tspan x="22.4" y="0" class="timest2 timest3">CKED</tspan><tspan x="24.3" y="13" class="timest2 timest3">ARE</tspan><tspan x="48.7" y="13" class="timest2 timest3">A</tspan></text>
          <g>
            <circle class="timest1" cx="1015.5" cy="1355.8" r="52.4"/>

              <a data-toggle="modal" href="#stackedarea"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/StackedAreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 1307.1909)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 942.5335 1285.1321)"><tspan x="0" y="0" class="timest2 timest3">LINE P</tspan><tspan x="38.9" y="0" class="timest2 timest3">L</tspan><tspan x="45.1" y="0" class="timest2 timest3">O</tspan><tspan x="55.1" y="0" class="timest2 timest3">T</tspan></text>
          <g>
            <circle class="timest1" cx="1015.5" cy="1217.9" r="52.4"/>

              <a data-toggle="modal" href="#line"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LineSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 1169.2809)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 943.619 1009.3145)"><tspan x="0" y="0" class="timest2 timest3">HE</tspan><tspan x="17.4" y="0" class="timest2 timest3">A</tspan><tspan x="25.3" y="0" class="timest2 timest3">TMA</tspan><tspan x="53.9" y="0" class="timest2 timest3">P</tspan></text>
          <g>
            <circle class="timest1" cx="1015.5" cy="942" r="52.4"/>

              <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 893.4605)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 938.7103 871.406)" class="timest2 timest3">RIDGELINE</text>
          <g>
            <circle class="timest1" cx="1015.5" cy="804.1" r="52.4"/>

              <a data-toggle="modal" href="#ridgeline"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/JoyplotSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 755.5506)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 961.8441 733.4976)" class="timest2 timest3">VIOLIN</text>
          <g>
            <circle class="timest1" cx="1015.5" cy="666.2" r="52.4"/>

              <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 966.914 617.6405)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 946.7193 595.5889)"><tspan x="0" y="0" class="timest2 timest3">B</tspan><tspan x="8.4" y="0" class="timest2 timest3">O</tspan><tspan x="18.5" y="0" class="timest2 timest3">XP</tspan><tspan x="34.7" y="0" class="timest2 timest3">L</tspan><tspan x="40.9" y="0" class="timest2 timest3">O</tspan><tspan x="50.9" y="0" class="timest2 timest3">T</tspan></text>
          <g>
            <path class="timest1" d="M1067.9,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
              C1044.4,475.9,1067.9,499.3,1067.9,528.3z"/>

              <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 966.914 479.7304)">
            </image></a>
          </g>
          <g>
            <polygon class="timest4" points="973.8,137.5 1015.5,113.4 1057.2,137.5 1057.2,185.7 1015.5,209.8 973.8,185.7      "/>
            <text transform="matrix(1 0 0 1 986.5743 157.1978)"><tspan x="0" y="0" class="timest1 timest5 timest6">SEVERAL</tspan><tspan x="6.8" y="16.8" class="timest1 timest5 timest6">SERIES</tspan></text>
          </g>
        </g>
        <g>
          <line class="timest0" x1="486.9" y1="209.8" x2="486.9" y2="1493.7"/>
          <text transform="matrix(1 0 0 1 417.0247 1560.949)"><tspan x="0" y="0" class="timest2 timest3">L</tspan><tspan x="6.2" y="0" class="timest2 timest3">OLLIPO</tspan><tspan x="51.8" y="0" class="timest2 timest3">P</tspan></text>
          <g>
            <circle class="timest1" cx="486.9" cy="1493.7" r="52.4"/>

              <a data-toggle="modal" href="#lollipop"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LollipopSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 1445.1011)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 419.7803 1423.0403)"><tspan x="0" y="0" class="timest2 timest3">B</tspan><tspan x="8.3" y="0" class="timest2 timest3">ARP</tspan><tspan x="33" y="0" class="timest2 timest3">L</tspan><tspan x="39.3" y="0" class="timest2 timest3">O</tspan><tspan x="49.3" y="0" class="timest2 timest3">T</tspan></text>
          <g>
            <circle class="timest1" cx="486.9" cy="1355.8" r="52.4"/>

              <a data-toggle="modal" href="#barplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BarSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 1307.1909)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 413.9241 1285.1321)"><tspan x="0" y="0" class="timest2 timest3">LINE P</tspan><tspan x="38.9" y="0" class="timest2 timest3">L</tspan><tspan x="45.1" y="0" class="timest2 timest3">O</tspan><tspan x="55.1" y="0" class="timest2 timest3">T</tspan></text>
          <g>
            <circle class="timest1" cx="486.9" cy="1217.9" r="52.4"/>

              <a data-toggle="modal" href="#line"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/LineSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 1169.2809)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 443.5054 1147.2231)"><tspan x="0" y="0" class="timest2 timest3">ARE</tspan><tspan x="24.5" y="0" class="timest2 timest3">A</tspan></text>
          <g>
            <circle class="timest1" cx="486.9" cy="1079.9" r="52.4"/>

              <a data-toggle="modal" href="#area"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/AreaSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 1031.3707)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 410.1009 871.406)" class="timest2 timest3">RIDGELINE</text>
          <g>
            <circle class="timest1" cx="486.9" cy="804.1" r="52.4"/>

              <a data-toggle="modal" href="#ridgeline"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/JoyplotSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 755.5506)">
            </image>
          </g>
          <text transform="matrix(1 0 0 1 433.2347 733.4976)" class="timest2 timest3">VIOLIN</text>
          <g>
            <circle class="timest1" cx="486.9" cy="666.2" r="52.4"/>

              <a data-toggle="modal" href="#violin"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ViolinSmall.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 617.6405)">
            </image></a>
          </g>
          <text transform="matrix(1 0 0 1 418.1099 595.5889)"><tspan x="0" y="0" class="timest2 timest3">B</tspan><tspan x="8.4" y="0" class="timest2 timest3">O</tspan><tspan x="18.5" y="0" class="timest2 timest3">XP</tspan><tspan x="34.7" y="0" class="timest2 timest3">L</tspan><tspan x="40.9" y="0" class="timest2 timest3">O</tspan><tspan x="50.9" y="0" class="timest2 timest3">T</tspan></text>
          <g>
            <path class="timest1" d="M539.3,528.3c0,29-23.5,52.4-52.4,52.4c-29,0-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
              C515.8,475.9,539.3,499.3,539.3,528.3z"/>

              <a data-toggle="modal" href="#boxplot"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/Box1Small.png"  transform="matrix(0.8522 0 0 0.8522 438.3045 479.7304)">
            </image></a>
          </g>
          <g>
            <polygon class="timest4" points="445.1,137.5 486.9,113.4 528.6,137.5 528.6,185.7 486.9,209.8 445.1,185.7      "/>
            <text transform="matrix(1 0 0 1 471.9784 157.1978)"><tspan x="0" y="0" class="timest1 timest5 timest6">ONE</tspan><tspan x="-7.2" y="16.8" class="timest1 timest5 timest6">SERIES</tspan></text>
          </g>
        </g>
        <g>
          <path class="timest0" d="M1015.5,113.4V70.9c-5.5-5.5-8.6-8.6-14.2-14.2H501.1c-5.5,5.5-8.6,8.6-14.2,14.2v42.5"/>
          <line class="timest7" x1="751.2" y1="56.7" x2="751.2" y2="0"/>
        </g>
      </g>
      <g id="Categorical">
      </g>
      <g id="Cat_And_Num">
      </g>
      <g id="Relational">
      </g>
      <g id="Numeric_copy">
      </g>
    </svg>
</div>



<!-- Relationnal -->
<div id="relationnal" class="tree" style="text-align:center;">

  <svg version="1.1" id="Numeric_copy" width="80%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1508.3 1502.4" style="enable-background:new 0 0 1508.3 1502.4;" xml:space="preserve">
  <style type="text/css">
    .relst0{fill:none;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .relst1{fill:#808285;}
    .relst2{fill:#FFFFFF;stroke:#808285;stroke-width:3;stroke-linecap:square;stroke-miterlimit:10;}
    .relst3{fill:none;stroke:#808285;stroke-width:3;stroke-miterlimit:10;}
    .relst4{font-family:'Lato-Regular';}
    .relst5{font-size:13px;}
    .relst6{font-family:'OpenSans-Semibold';}
    .relst7{font-size:14px;}
    .relst8{font-size:11px;}
  </style>
  <g id="Cat_And_Num">
  </g>
  <g id="Relational">
    <g>
      <line class="relst0" x1="1271.1" y1="328.7" x2="1271.1" y2="528.3"/>
      <text transform="matrix(1 0 0 1 1167.9794 595.5887)"><tspan x="0" y="0" class="relst4 relst5">HIERARCHICAL</tspan><tspan x="-12.7" y="13" class="relst4 relst5">EDGE BUNDLING</tspan></text>
      <g>
        <path class="relst1" d="M1323.5,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1323.5,499.3,1323.5,528.3z"/>

          <a data-toggle="modal" href="#bundle"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/BundleSmall.png"  transform="matrix(0.8522 0 0 0.8522 1222.5332 479.729)">
        </image></a>
      </g>
      <g>
        <polygon class="relst2" points="1229.4,258.3 1271.1,234.2 1312.8,258.3 1312.8,306.5 1271.1,330.6 1229.4,306.5      "/>
        <text transform="matrix(1 0 0 1 1249.2278 271.847)"><tspan x="0" y="0" class="relst1 relst6 relst7">VALUE</tspan><tspan x="8.2" y="16.8" class="relst1 relst6 relst7">FOR</tspan><tspan x="-14.5" y="30" class="relst1 relst6 relst8">CONNECTION</tspan></text>
      </g>
      <path class="relst0" d="M1096.3,185.7h160.6c5.5,5.5,8.6,8.6,14.2,14.2v32.5"/>
    </g>
    <g>
      <line class="relst0" x1="1126.8" y1="328.7" x2="1126.8" y2="844.4"/>
      <text transform="matrix(1 0 0 1 1069.3688 871.4071)"><tspan x="0" y="0" class="relst4 relst5">CHORD</tspan><tspan x="-13.8" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <circle class="relst1" cx="1126.8" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#chord"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ChordSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1971 755.55)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1066.2042 733.4979)"><tspan x="0" y="0" class="relst4 relst5">SANKEY</tspan><tspan x="-10.8" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <circle class="relst1" cx="1126.8" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1964 617.6396)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 1021.9451 595.5887)" class="relst4 relst5">DENDROGRAM</text>
      <g>
        <path class="relst1" d="M1179.2,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S1179.2,499.3,1179.2,528.3z"/>

          <a data-toggle="modal" href="#dendrogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DendrogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 1078.1958 479.729)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>The hierarchical organization is displayed using an edge data frame: each row gives the 2 nodes to link, and a value for it.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/NestedEdgeVal.png' alt=''><br><br></div>">
        <polygon class="relst2" points="1085,258.3 1126.8,234.2 1168.5,258.3 1168.5,306.5 1126.8,330.6 1085,306.5      "/>
        <text transform="matrix(1 0 0 1 1104.8917 269.6237)"><tspan x="0" y="0" class="relst1 relst6 relst7">VALUE</tspan><tspan x="8.2" y="16.8" class="relst1 relst6 relst7">FOR</tspan><tspan x="0" y="33.6" class="relst1 relst6 relst7">EDGES</tspan></text>
      </g>
      <path class="relst0" d="M1126.8,232.3v-8.4c-5.5-5.5-8.6-8.6-14.2-14.2h-58"/>
    </g>
    <g>
      <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>The hierarchical organization is displayed a nested data frame: each row gives a path from the origin of the hierarchy to the leaf. An additional column provides a value for the leaf.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/NestedValDataFrame.png' alt=''><br><br></div>">
        <polygon class="relst2" points="940.7,258.3 982.4,234.2 1024.2,258.3 1024.2,306.5 982.4,330.6 940.7,306.5      "/>
        <text transform="matrix(1 0 0 1 960.555 278.0238)"><tspan x="0" y="0" class="relst1 relst6 relst7">VALUE</tspan><tspan x="-9.7" y="16.8" class="relst1 relst6 relst7">FOR LEAF</tspan></text>
      </g>
      <path class="relst0" d="M1054.6,209.8h-58c-5.5,5.5-8.6,8.6-14.2,14.2v8.4"/>
    </g>
    <g>
      <path class="relst0" d="M838.1,328.7v59.4c5.5,5.5,8.6,8.6,14.2,14.2h43.8c5.5,5.5,8.6,8.6,14.2,14.2v59.4"/>
      <path class="relst0" d="M982.4,328.7v59.4c-5.5,5.5-8.6,8.6-14.2,14.2h-43.8c-5.5,5.5-8.6,8.6-14.2,14.2v663.5"/>
      <text transform="matrix(1 0 0 1 849.5054 1147.2299)"><tspan x="0" y="0" class="relst4 relst5">SANKEY</tspan><tspan x="-10.8" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <path class="relst1" d="M962.7,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S962.7,1051,962.7,1079.9z"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 861.693 1031.37)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 832.3316 1009.3173)" class="relst4 relst5">SUNBURST</text>
      <g>
        <circle class="relst1" cx="910.3" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#sunburst"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SunburstSmall.png"  transform="matrix(0.8522 0 0 0.8522 861.6923 893.4593)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 837.5772 871.4071)"><tspan x="0" y="0" class="relst4 relst5">CIRCULAR</tspan><tspan x="5.4" y="13" class="relst4 relst5">PACKING</tspan></text>
      <g>
        <circle class="relst1" cx="910.3" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#circularpacking"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/CircularPackingSmall.png"  transform="matrix(0.8522 0 0 0.8522 861.6923 755.5491)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 840.1968 733.4979)" class="relst4 relst5">TREEMAP</text>
      <g>
        <circle class="relst1" cx="910.3" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#treemap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/TreeSmall.png"  transform="matrix(0.8522 0 0 0.8522 861.6932 617.6398)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 805.4412 595.5887)" class="relst4 relst5">DENDROGRAM</text>
      <g>
        <path class="relst1" d="M962.7,528.3c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S962.7,499.3,962.7,528.3z"/>

          <a data-toggle="modal" href="#dendrogram"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/DendrogramSmall.png"  transform="matrix(0.8522 0 0 0.8522 861.6923 479.729)">
        </image></a>
      </g>
    </g>
    <g>
      <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 5vh + 3%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Two format are possible to provide the hierarchical organization.<br>In a nested data frame, each row gives a path from the origin of the hierarchy to the leaf.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/NestedNoValDataFrame.png' alt=''><br><br><em>In a edge list, each row describe an edge of the tree.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/NestedNoValEdgelist.png' alt=''><br></div>">
        <polygon class="relst2" points="796.4,258.3 838.1,234.2 879.8,258.3 879.8,306.5 838.1,330.6 796.4,306.5      "/>
        <text transform="matrix(1 0 0 1 827.1054 278.0238)"><tspan x="0" y="0" class="relst1 relst6 relst7">NO</tspan><tspan x="-10.9" y="16.8" class="relst1 relst6 relst7">VALUE</tspan></text>
      </g>
      <path class="relst0" d="M1012.9,185.7H852.3c-5.5,5.5-8.6,8.6-14.2,14.2v32.5"/>
    </g>
    <g>
      <polygon class="relst2" points="1012.9,137.5 1054.6,113.4 1096.3,137.5 1096.3,185.7 1054.6,209.8 1012.9,185.7    "/>
      <text transform="matrix(1 0 0 1 1028.3589 151.0211)"><tspan x="0" y="0" class="relst1 relst6 relst7">NESTED</tspan><tspan x="16.3" y="16.8" class="relst1 relst6 relst7">OR</tspan><tspan x="-12.7" y="30" class="relst1 relst6 relst8">HIERARCHICAL</tspan></text>
    </g>
    <g>
      <line class="relst0" x1="303.4" y1="209.8" x2="303.4" y2="1179.8"/>
      <text transform="matrix(1 0 0 1 262.9932 1285.1381)" class="relst4 relst5">HIVE</text>
      <g>

          <ellipse transform="matrix(0.9999 -1.596311e-02 1.596311e-02 0.9999 -19.4021 4.9987)" class="relst1" cx="303.4" cy="1217.9" rx="52.4" ry="52.4"/>

          <a data-toggle="modal" href="#hive"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HiveSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8494 1169.2806)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 230.0841 1147.2299)" class="relst4 relst5">HEATMAP</text>
      <g>
        <path class="relst1" d="M355.9,1079.9c0,29-23.5,52.4-52.4,52.4s-52.4-23.5-52.4-52.4c0-29,23.5-52.4,52.4-52.4
          S355.9,1051,355.9,1079.9z"/>

          <a data-toggle="modal" href="#heatmap"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/HeatmapSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8494 1031.3706)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 242.8558 1009.3173)"><tspan x="0" y="0" class="relst4 relst5">SANKEY</tspan><tspan x="-10.8" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <circle class="relst1" cx="303.4" cy="942" r="52.4"/>

          <a data-toggle="modal" href="#sankey"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/SankeySmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8487 893.4599)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 267.4385 871.4071)"><tspan x="0" y="0" class="relst4 relst5">ARC</tspan><tspan x="-35.2" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <circle class="relst1" cx="303.4" cy="804.1" r="52.4"/>

          <a data-toggle="modal" href="#arc"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ArcSmal.png"  transform="matrix(0.8522 0 0 0.8522 254.8494 755.5505)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 245.8199 733.4979)"><tspan x="0" y="0" class="relst4 relst5">CHORD</tspan><tspan x="-13.8" y="13" class="relst4 relst5">DIAGRAM</tspan></text>
      <g>
        <circle class="relst1" cx="303.4" cy="666.2" r="52.4"/>

          <a data-toggle="modal" href="#chord"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/ChordSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8494 617.6403)">
        </image></a>
      </g>
      <text transform="matrix(1 0 0 1 227.1324 595.5887)" class="relst4 relst5">NETWORK</text>
      <g>
        <path class="relst1" d="M355.9,528.3c0,29-23.5,52.4-52.4,52.4S251,557.3,251,528.3c0-29,23.5-52.4,52.4-52.4
          S355.9,499.3,355.9,528.3z"/>

          <a data-toggle="modal" href="#network"><image class="graphtypelogo" style="overflow:visible;" width="114" height="114" xlink:href="img/section/NetworkSmall.png"  transform="matrix(0.8522 0 0 0.8522 254.8489 479.7299)">
        </image></a>
      </g>
      <g data-toggle="tooltip" data-html="true" data-placement="bottom" offset='100 - 7vh + 9%' class="data-tooltip" style="color: #f00;" title="<div class='data-tooltip'><br><em>Network data can have several input format. An edge list describes one edge per row. It can be supported by a node data frame that gives feature for each node.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/NetworkEdgeAndNode.png' alt=''><br><br><em>An adjacency matrix is a rectangular matrix that shows all the origine nodes in row, all the destination nodes in column. Values can be logical (1/0) or give a value for the edge.It can also be supported by a node data frame.</em><br><br><img width='250' height='200' class='img-fluid' src='img/table/Relational/AdjacencyAndNode.png' alt=''></div>">
        <polygon class="relst2" points="261.7,137.5 303.4,113.4 345.2,137.5 345.2,185.7 303.4,209.8 261.7,185.7      "/>
        <text transform="matrix(1 0 0 1 268.9928 165.5978)" class="relst1 relst6 relst7">NETWORK</text>
      </g>
    </g>
    <g>
      <path class="relst0" d="M1054.6,113.4V70.9c-5.5-5.5-8.6-8.6-14.2-14.2H317.6c-5.5,5.5-8.6,8.6-14.2,14.2v42.5"/>
      <line class="relst3" x1="751.2" y1="56.7" x2="751.2" y2="0"/>
    </g>
  </g>
  <g id="Numeric_copy">
  </g>

<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="180" y="1190"><a class="mystory" xlink:href="story/AdjacencyMatrix.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="785" y="1070"><a class="mystory" xlink:href="story/SevCatOneNumNestedOneObsPerGroup.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1010" y="785"><a class="mystory" xlink:href="story/NestedValueForLinks.html">Story</a></tspan></text>
<text transform="matrix(0.9999 -1.224000e-02 1.224000e-02 0.9999 87.5505 148.9814)"><tspan x="1150" y="515"><a class="mystory" xlink:href="story/NestedValueForConnection.html">Story</a></tspan></text>


  </svg>

</div>



</section>

<!-- ======================================================================= -->














<!-- ======================== STORY SECTION ================================ -->


    <section class="" id="story" style="background-color:#69b3a2; padding: 0px 0; padding-top: 0px">
    <div class="parallaxstory">
      <div class="container">
        <div class="row">
          <div class="col-lg-2 text-center"></div>
          <div class="col-lg-8 text-center">
            <br><br><br><br><br>
            <h2 class="section-heading text-uppercase" >Data Story</h2>
            <p>From Data to Viz provides a decision tree based on input data format. This tree leads to twenty formats representing the most common dataset types. For each, an example of analysis based on real-life data is provided using the <a href="https://www.r-graph-gallery.com">R programming language</a>.</p>
            <br>
            <div class="btn-group">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Numeric</button>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="story/OneNum.html">Rbnb night prices on the french riviera</a>
                  <a class="dropdown-item" href="story/TwoNum.html">Price / area relationship of 1500 apartments</a>
                  <a class="dropdown-item" href="story/TwoNumOrdered.html">Evolution of the bitcoin price</a>
                  <a class="dropdown-item" href="story/ThreeNum.html">Relationship between life expectancy, gdp per capita and population</a>
                  <a class="dropdown-item" href="story/OneCatSevOrderedNum.html">Evolution of baby names in the US since 1880</a>
                  <a class="dropdown-item" href="story/SeveralNum.html">Features of 32 famous car models</a>
                </div>
              </div>
            </div>

            <div class="btn-group">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Categoric</button>
                <div class="dropdown-menu">
                      <a class="dropdown-item" href="story/OneNumOneCat.html">Who sells more weapons?</a>
                      <a class="dropdown-item" href="story/SeveralIndepLists.html">Comparing the lyrics of 3 french rappers</a>
                      <a class="dropdown-item" href="story/SevCatOneNumNestedOneObsPerGroup.html">Repartition of the world population</a>
                      <a class="dropdown-item" href="story/OneNumSevCatSubgroupOneObsPerGroup.html">The gender wage gap</a>
                      <a class="dropdown-item" href="story/AdjacencyMatrix.html">Co-autorship network | migration flows</a>
                </div>
              </div>
            </div>

            <div class="btn-group">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Num & Cat</button>
                <div class="dropdown-menu">
                      <a class="dropdown-item" href="story/OneNumOneCat.html">Who sells more weapons?</a>
                      <a class="dropdown-item" href="story/OneNumOneCatSeveralObs.html">How people perceive probability vocabulary</a>
                      <a class="dropdown-item" href="story/SeveralNum.html">Features of 32 famous car models</a>
                      <a class="dropdown-item" href="story/OneCatSevOrderedNum.html">Evolution of baby names in the US since 1880</a>
                      <a class="dropdown-item" href="story/OneNumSevCatSubgroupOneObsPerGroup.html">The gender wage gap</a>
                      <a class="dropdown-item" href="story/OneNumSevCatSubgroupSevObsPerGroup.html">How much do people tip?</a>
                      <a class="dropdown-item" href="story/SevCatOneNumNestedOneObsPerGroup.html">Repartition of the world population</a>
                      <a class="dropdown-item" href="">-</a>
                      <a class="dropdown-item" href="story/AdjacencyMatrix.html">Co-autorship network | migration flows</a>
                </div>
              </div>
            </div>

            <div class="btn-group">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Maps</button>
                <div class="dropdown-menu">
                      <a class="dropdown-item" href="story/GPSCoordWithoutValue.html">Where surfers live</a>
                      <a class="dropdown-item" href="story/GPSCoordWithValue.html">The population of 1000 cities in the UK</a>
                      <a class="dropdown-item" href="story/MapConnection.html">Where surfers travel</a>
                      <a class="dropdown-item" href="graph/choropleth.html">Distribution of restaurants in the south of France</a>
                </div>
              </div>
            </div>

            <div class="btn-group">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Network</button>
                <div class="dropdown-menu">
                      <a class="dropdown-item" href="story/AdjacencyMatrix.html">Co-autorship network | migration flows</a>
                      <a class="dropdown-item" href="story/SevCatOneNumNestedOneObsPerGroup.html">Repartition of the world population</a>
                      <a class="dropdown-item" href="">-</a>
                      <a class="dropdown-item" href="graph/edge_bundling.html">Connection between informatic components</a>
                </div>
              </div>
            </div>



            <br><br><br><br>
          </div>
        </div>
      </div>
    </div>

    </section>












<!-- ======================== PORTFOLIO SECTION ============================ -->

    <section class="bg-light" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">A world of possibilities</h2>
            <h3 class="section-subheading text-muted">Here is an overview of all the graph types presented in this website.</h3>
            <div id="portfolio-button-container">
              <button class="btn btn-secondary active" data-portfolio-section="all">Show all</button>
              <button class="btn btn-secondary" data-portfolio-section="distribution">Distribution</button>
              <button class="btn btn-secondary" data-portfolio-section="correlation">Correlation</button>
              <button class="btn btn-secondary" data-portfolio-section="ranking">Ranking</button>
              <button class="btn btn-secondary" data-portfolio-section="partofawhole">Part of a whole</button>
              <button class="btn btn-secondary" data-portfolio-section="evolution">Evolution</button>
              <button class="btn btn-secondary" data-portfolio-section="maps">Map</button>
              <button class="btn btn-secondary" data-portfolio-section="flow">Flow</button>
            </div>
            <br>
          </div>
        </div>
        <br><br>
        <div id="portfolio-items" class="row">

          <div class="col-md-2 col-sm-4 portfolio-item show column distribution numfact bigdata" >
            <a class="portfolio-link" data-toggle="modal" href="#violin">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Violin150.png" alt="">
            </a>
            <div class="captionPortfolio">Violin</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column distribution numonly bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#density">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Density150.png" alt="">
            </a>
            <div class="captionPortfolio">Density</div>
          </div>


          <div class="col-md-2 col-sm-4 portfolio-item show column distribution numfact smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#histogram">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Histogram150.png" alt="">
            </a>
            <div class="captionPortfolio">Histogram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column distribution numfact smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#boxplot">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Box1150.png" alt="">
            </a>
            <div class="captionPortfolio">Boxplot</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column distribution numfact bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#ridgeline">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Joyplot150.png" alt="">
            </a>
            <div class="captionPortfolio">Ridgeline</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numonly numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#scatter">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/ScatterPlot150.png" alt="">
            </a>
            <div class="captionPortfolio">Scatter</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numfact smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#heatmap">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Heatmap150.png" alt="">
            </a>
            <div class="captionPortfolio">Heatmap</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numfact smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#correlogram">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Correlogram150.png" alt="">
            </a>
            <div class="captionPortfolio">Correlogram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#bubble">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/BubblePlot150.png" alt="">
            </a>
            <div class="captionPortfolio">Bubble</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numonly time smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#connectedscatter">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/ScatterConnected150.png" alt="">
            </a>
            <div class="captionPortfolio">Connected scatter</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column correlation numonly bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#density2d">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/2dDensity150.png" alt="">
            </a>
            <div class="captionPortfolio">Density 2d</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#barplot">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Bar150.png" alt="">
            </a>
            <div class="captionPortfolio">Barplot</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#spider">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Spider150.png" alt="">
            </a>
            <div class="captionPortfolio">Spider / Radar</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#wordcloud">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Wordcloud150.png" alt="">
            </a>
            <div class="captionPortfolio">Wordcloud</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#parallel">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Parallel1150.png" alt="">
            </a>
            <div class="captionPortfolio">Parallel</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#lollipop">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Lollipop150.png" alt="">
            </a>
            <div class="captionPortfolio">Lollipop</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column ranking numfact smalldata">
            <a class="portfolio-link" data-toggle="modal" href="#circularbarplot">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/CircularBarplot150.png" alt="">
            </a>
            <div class="captionPortfolio">Circular Barplot</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#treemap">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Tree150.png" alt="">
            </a>
            <div class="captionPortfolio">Treemap</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#venn">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Venn150.png" alt="">
            </a>
            <div class="captionPortfolio">Venn diagram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#donut">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Doughnut150.png" alt="">
            </a>
            <div class="captionPortfolio">Doughnut</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#pie">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Pie150.png" alt="">
            </a>
            <div class="captionPortfolio">Pie chart</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#dendrogram">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Dendrogram150.png" alt="">
            </a>
            <div class="captionPortfolio">Dendrogram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#circularpacking">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/CircularPacking150.png" alt="">
            </a>
            <div class="captionPortfolio">Circular packing</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column partofawhole graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#sunburst">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Sunburst150.png" alt="">
            </a>
            <div class="captionPortfolio">Sunburst</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column evolution graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#line">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Line150.png" alt="">
            </a>
            <div class="captionPortfolio">Line plot</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column evolution graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#area">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Area150.png" alt="">
            </a>
            <div class="captionPortfolio">Area</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column evolution graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#stackedarea">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/StackedArea150.png" alt="">
            </a>
            <div class="captionPortfolio">Stacked area</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column evolution graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#streamgraph">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Stream150.png" alt="">
            </a>
            <div class="captionPortfolio">Streamchart</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#map">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Map150.png" alt="">
            </a>
            <div class="captionPortfolio">Map</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#choropleth">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Choropleth150.png" alt="">
            </a>
            <div class="captionPortfolio">Choropleth</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#hexbinmap">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/MapHexbin150.png" alt="">
            </a>
            <div class="captionPortfolio">Hexbin map</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#cartogram">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Cartogram150.png" alt="">
            </a>
            <div class="captionPortfolio">Cartogram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#connection">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/ConnectedMap150.png" alt="">
            </a>
            <div class="captionPortfolio">Connection</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column maps graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#bubblemap">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/BubbleMap150.png" alt="">
            </a>
            <div class="captionPortfolio">Bubble map</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column flow graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#chord">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Chord150.png" alt="">
            </a>
            <div class="captionPortfolio">Chord diagram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column flow graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#network">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Network150.png" alt="">
            </a>
            <div class="captionPortfolio">Network</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column flow graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#sankey">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Sankey150.png" alt="">
            </a>
            <div class="captionPortfolio">Sankey</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column flow graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#arc">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Arc150.png" alt="">
            </a>
            <div class="captionPortfolio">Arc diagram</div>
          </div>

          <div class="col-md-2 col-sm-4 portfolio-item show column flow graphstructure smalldata bigdata">
            <a class="portfolio-link" data-toggle="modal" href="#bundle">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Bundle150.png" alt="">
            </a>
            <div class="captionPortfolio">Edge bundling</div>
          </div>

        </div>
      </div>
    </section>


<!-- ======================================================================= -->









<!-- --------------------------- Subscribe Form  ------------------------------------------------------------------- -->
<section id="form" class="" style="padding-bottom: 150px; padding-top: 150px">
  <div class="container">
    <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
      <div style="max-width: 600px; text-align: center;">
        <h2>❤️ Enjoying the project? ❤️</h2>
        <p>Dive deeper into the world of data visualization with <i>Dataviz Universe</i>, my newsletter packed with <b>actionable tips and tricks</b> to enhance your data storytelling skills.</p>
        <div style="margin-top: -50px; width: 100%; display: flex; justify-content: center;">
          <script async data-uid="8010f15fd2" src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"></script>
        </div>
      </div>
    </div>
  </div>
</section>









<!-- =========================== CAVEAT SECTION ============================ -->


    <section id="caveats" class="bg-light">
      <div class="container">

        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Caveats</h2>
            <h3 class="section-subheading text-muted">The best way to visualize data efficiently is probably to avoid the most common mistakes.<br><br>From Data to Viz offers you a <a href="caveats.html">gallery of common caveats.</a></h3>
          </div>
        </div>



          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">

              <div class="carousel-item active">
                <div class="row">

                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/order_data.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/order_data.png">
                      <p class="mytitlerelated">Order your data</p>
                      <p class="mytextrelated">When displaying the value of several entities, ordering it makes it way more insightful.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/cut_y_axis.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/cut_y_axis.png">
                      <p class="mytitlerelated">To cut or not to cut?</p>
                      <p class="mytextrelated">Cutting the Y axis is one of the most controversial practices in data viz. See why.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/spaghetti.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/spaghetti.png">
                      <p class="mytitlerelated">The spaghetti chart</p>
                      <p class="mytextrelated">A line graph with too many lines becomes unreadable: it is called a spaghetti graph.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/pie.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/pie.png">
                      <p class="mytitlerelated">Pie chart</p>
                      <p class="mytextrelated">The human eye is bad at reading angles. See how to replace the most criticized chart ever.</p>
                    </a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="row">
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/bin_size.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/bin_size.png">
                      <p class="mytitlerelated">Play with histogram bin size</p>
                      <p class="mytextrelated">Always try different bin sizes when you build an histogram, it can lead to different insights.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/boxplot.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/boxplot.png">
                      <p class="mytitlerelated">Do boxplots hide information?</p>
                      <p class="mytextrelated">A boxplot is a great way to summarize a distribution but it hides the sample size and data distribution.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/error_bar.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/error_bar.png">
                      <p class="mytitlerelated">The problem with error bars</p>
                      <p class="mytextrelated">Barplots with error bars must be used with great care. Learn why and how to replace them.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/multi_distribution.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/multi_distribution.png">
                      <p class="mytitlerelated">Too many distributions</p>
                      <p class="mytextrelated">If you need to compare the distribution of many variables, don't clutter your graph.</p>
                    </a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="row">
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/overplotting.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/overplotting.png">
                      <p class="mytitlerelated">Overplotting</p>
                      <p class="mytextrelated">Too many points on your scatter plot makes it unreadable? Techniques exist to avoid overplotting.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/rainbow.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/rainbow.png">
                      <p class="mytitlerelated">The rainbow color palette</p>
                      <p class="mytextrelated">Avoid the rainbow color palette when you map a numeric variable. So many better palettes exist.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/small_multiple.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/small_multiple.png">
                      <p class="mytitlerelated">Faceting: horizontal or vertical?</p>
                      <p class="mytextrelated">Placing individual plots horizontally or vertically is an important choice to make.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6">
                    <a href="caveat/counter_intuitive.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/counter_intuitive.png">
                      <p class="mytitlerelated">Don't be counter intuitive</p>
                      <p class="mytextrelated">Your audience is used to a few dataviz standards. Not respecting it can mislead them.</p>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>

        </div>
        <br>
        <div style="text-align:center"><a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="caveats.html">See the collection</a></div>

      </section>


<!-- ======================================================================= -->









<!-- ============================= POSTER SECTION ========================== -->


<!-- Croping image: the goal is to have a 800 x 400 -->
<!-- Change image size o have heght = 400: convert poster_small.png -resize 800x400 poster_xsmall.png -->
<!-- Add white space on the side to have the good size: convert -size 800x400 xc:white poster_xsmall.png  -gravity center -composite output.png -->
<!-- OR Crop images with convert alisasinger.jpg -crop 1000x350+50+10  titi.png -->

  <!-- see https://www.w3schools.com/howto/howto_js_slideshow.asp for carousel -->
    <section id="poster" >
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Poster</h2>
            <h3 class="section-subheading text-muted">The 'Data to Viz' project is available in a high quality printed poster. See our <a href="poster.html">online shop</a> to support the project.</h3>
          </div>
        </div>
        <div class="slideshow-container">
          <div class="mySlides">
            <img src="img/poster/poster_mockup_croped.jpg" style="width:100%">
          </div>
          <div class="mySlides">
            <a data-toggle="modal" href="#poster_full"><img src="img/poster/poster_800_400.png" style="width:100%"></a>
          </div>
          <div class="mySlides">
            <img src="img/poster/poster_zoom_800_400.png" style="width:100%">
          </div>
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
        <br>
        <div style="text-align:center">
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="poster.html">Buy a poster</a>
          <a class="btn btn-primary btn-xl text-uppercase" data-toggle="modal" href="#poster_full">See it full screen</a>
        </div>
      </div>
    </section>





    <script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
    }
    </script>


<!-- ======================================================================= -->








<!-- ========================== ABOUT SECTION ============================== -->

    <section id="about" class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            <h2 class="section-heading text-uppercase">About the project</h2>
            <p class="large text-muted">‘From Data to Viz’ is a classification of chart types based on input data format. It comes in the form of a decision tree leading to a set of potentially appropriate visualizations to represent your dataset. <a href="about.html">Read more</a>.</p>
          </div>
          <div class="col-lg-10 mx-auto text-center">
             <div style="text-align:center">
              <a class="btn btn-primary btn-l text-uppercase js-scroll-trigger" href="about.html#toolsanchor">Tools</a>
              <a class="btn btn-primary btn-l text-uppercase js-scroll-trigger" href="about.html#acknowledgmentanchor">Acknowledgment</a>
              <a class="btn btn-primary btn-l text-uppercase js-scroll-trigger" href="about.html#historyanchor">History</a>
              <a class="btn btn-primary btn-l text-uppercase js-scroll-trigger" href="#contact">Feedback</a>
            </div>
          </div>
          <div class="col-lg-8 mx-auto text-center">
            <br>
            <p class="large text-muted">This website has been developed by two friends from the south of France in their spare time. Feel free to <a href="#contact">drop us a word</a> if the project helped you or for any feedback. Or even better, hire us!</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"></div>
          <div class="col-sm-4">
            <div class="team-member">
              <a href="https://www.linkedin.com/in/yan-holtz-2477534a/"><img class="mx-auto rounded-circle" src="img/team/YH_pic_square.png" alt=""></a>
              <a href="https://www.linkedin.com/in/yan-holtz-2477534a/"><h4>Yan Holtz</h4></a>
              <p class="text-muted">Data analyst</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="https://twitter.com/R_Graph_Gallery">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="https://github.com/holtzy">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <a href="http://www.conor.fr"><img class="mx-auto rounded-circle" src="img/team/ConorHealy.jpg" alt=""></a>
              <a href="http://www.conor.fr"><h4>Conor Healy</h4></a>
              <p class="text-muted">Designer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="http://www.conor.fr/indexEN.html">
                    <i class="fa fa-home"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="http://www.conor.fr/indexEN.html">
                    <i class="fa fa-envelope"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="https://www.linkedin.com/in/conor-healy-b0299810a/">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-1"></div>
        </div>
      </div>
    </section>

<!-- ======================================================================= -->







<!-- ======================= CONTACT SECTION =============================== -->



<section id="contact" >
  <div class="container">
    <div class="row">
         <div class="col-lg-2 text-center"></div>
         <div class="col-lg-8 text-center">
           <br><br><br>
           <h2 class="section-heading text-uppercase">Contact</h2>
           <p>We welcome any feedback you may have! You can open an issue on <a href="https://github.com/holtzy/data_to_viz">Github</a>, drop us a message on <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send us an email at <a href="mailto:yan.holtz.data@gmail.com">yan.holtz.data@gmail.com</a>. Subscribe below for even more <b>insightful dataviz tips</b>!</p>
           <div style="margin-top: -50px; width: 100%; display: flex; justify-content: center;">
            <script async data-uid="8010f15fd2" src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"></script>
          </div>
         </div>
       </div>
    </div>
  </section>





<!-- ======================= FOOTER SECTION ================================ -->
    <footer class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; from Data to Viz 2018</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="https://twitter.com/R_Graph_Gallery">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://github.com/holtzy">
                  <i class="fa fa-github"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>


<!-- ======================================================================= -->





<!-- ======================= PROMO BANNER SECTION ================================ -->
<!-- <a href="https://www.productive-r-workflow.com" id="promo-banner" class="promo-banner">
    <div>
      👋 Hi! Just released my latest project! If you're into R, you will <b>LOVE</b> it! ❤️
    <button onclick="closeBanner()" class="promo-banner-close-btn">&times;</button>
  </div>
</a> -->
<!-- ======================================================================= -->








<!-- =================== MODAL SECTION ===================================== -->

    <!-- Poster FULL -->
    <div class="portfolio-modal modal fade" id="poster_full" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog h-100" style="max-width: 100vw;">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 100px; margin-top: 100px;">
            <h2 class="text-center">High Resolution Poster</h2>
            <p class="text-center" style="max-width: 600px;">The digital version of the <i>Data to Viz</i> poster in high resolution is pretty heavy. Enter your email adress below and I'll deliver it to your inbox!</p>
            <div style="margin-top: -50px; width: 100%; display: flex; justify-content: center;">
              <script async data-uid="8010f15fd2" src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"></script>
            </div>
            <br/>
            <div class="text-center">
              <img class="img-fluid" src="img/poster/poster_small.png" alt="High Resolution Poster" style="max-width: 400px;">
            </div>
            <p>PS: you can also purchase it as a high-quality <a href="https://www.data-to-viz.com/poster">printed poster</a> 🎉!</p>
          </div>
        </div>
      </div>
    </div>




    <!-- Violin -->
    <div class="portfolio-modal modal fade" id="violin" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/violin.html"><img class="img-fluid d-block mx-auto" src="img/section/Violin150.png" alt=""></a>

                  <a href="graph/violin.html"><h2 class="text-uppercase">Violin</h2></a>
                  <p class="item-intro text-muted">An alternative to boxplot to compare the distribution of several groups.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">Violinplots allow to visualize the distribution of a numeric variable for one or several groups. It is really close from a <a href="caveat/boxplot.html">boxplot</a>, but allows a deeper understanding of the distribution. <br><br>Violins are particularly adapted when the amount of data is huge and showing individual observations gets impossible.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important;"><ul><li>If you have just a few groups, you are probably interested by <a href="graph/ridgeline.html">ridgeline charts</a>.</li><li>If you compare groups with very different sample size, <a href="caveat/boxplot.html">show it</a>.</li><li><a href="caveat/order_data.html">Ordering groups</a> by median value makes the chart more insightful.</li></ul><br></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/violin/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/violin-plot/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/violin" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/violin-plot" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/violin.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- Density -->
    <div class="portfolio-modal modal fade" id="density" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/density.html"><img class="img-fluid d-block mx-auto" src="img/section/Density150.png" alt=""></a>

                  <a href="graph/density.html"><h2 class="text-uppercase">Density</h2></a>
                  <p class="item-intro text-muted">Show the density of a numeric variable</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A density plot shows the distribution of a numeric variable. It takes only numeric variables as input and is very close from an <a href="#histogram">histogram</a>. It can be use in the same exact condition.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/bin_size.html">Play with the bandwith</a> of your density function.</li><li>Don't show the distribution of <a href="caveat/multi_distribution.html">more than ~5 variables</a>. Use Violin or Ridge line plot instead.</li><li>Avoid filling with <a href="caveat/color_com_nothing.html">color palettes</a>.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/density-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/density-plot/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/density" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/density-plot" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/density.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

        <!-- Histogram -->
    <div class="portfolio-modal modal fade" id="histogram" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/histogram.html"><img class="img-fluid d-block mx-auto" src="img/section/Histogram150.png" alt=""></a>

                  <a href="graph/histogram.html"><h2 class="text-uppercase">Histogram</h2></a>
                  <p class="item-intro text-muted">An accurate graphical representation of the distribution of numeric data.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A histogram takes as input a numeric variable only. The variable is cut into several bins, and the number of observation per bin is represented by the height of the bar. It is possible to represent the distribution of several variable on the same axis using this technique.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/bin_size.html">Play with the bin size</a>, it can give different insight.</li><li>Don't show the distribution of <a href="caveat/multi_distribution.html">more than ~5 variables</a>. Use <a href="graph/violin.html">violin</a> or <a href="graph/ridgeline.html">ridgeline plot</a> instead.</li><li><a href="caveat/color_com_nothing.html">Avoid filling with color palettes.</a></li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/histogram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/histogram/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/histogram" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/histogram" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/histogram.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Boxplot -->
    <div class="portfolio-modal modal fade" id="boxplot" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="caveat/boxplot.html"><img class="img-fluid d-block mx-auto" src="img/section/Box1150.png" alt=""></a>

                  <a href="caveat/boxplot.html"><h2 class="text-uppercase">Boxplot</h2></a>
                  <p class="item-intro text-muted">Summarize the distribution of numeric variables</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="caveat/boxplot.html">boxplot</a> gives a nice summary of one or several numeric variables. The line that divides the box into 2 parts represents the median of the data. The end of the box shows the upper and lower quartiles. The extreme lines show the highest and lowest value excluding outliers.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Boxplot hides the sample size of each group, <a href="caveat/boxplot.html">show it with annotation or box width.</a></li><li>Boxplot <a href="caveat/boxplot.html">hides the underlying distribution</a>. Use jitter if low number of data points, or use violin with bigger data.</li><li><a href="caveat/order_data.html">Order your boxplot</a> by median can make it more insightful.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/boxplot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/boxplot/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/boxplot" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/boxplot" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="caveat/boxplot.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Ridgeline-->
    <div class="portfolio-modal modal fade" id="ridgeline" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/ridgeline.html"><img class="img-fluid d-block mx-auto" src="img/section/Joyplot150.png" alt=""></a>

                  <a href="graph/ridgeline.html"><h2 class="text-uppercase">Ridgeline plot</h2></a>
                  <p class="item-intro text-muted">Several distributions aligned to the same horizontal scale and presented with a slight overlap</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/ridgeline.html">Ridgeline plot</a> (sometimes called Joyplot) shows the distribution of a numerical value for several groups. Distribution can be represented using <a href="graph/histogram.html">histograms</a> or <a href="graph/density.html">density plots</a>, all aligned to the same horizontal scale and presented with a slight overlap. <br><br> It is especially useful when the number of group to represent is high, and thus a classic window separation would take to much space.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>As with histogram or density plot, <a href="caveat/bin_size.html">play with bin size</a> / bandwidth argument.</li><li>Ridgeline plot works well when there is a clear pattern to discover since it hides a part of the data where the overlap takes place.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/ridgeline-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/ridgeline" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/ridgeline" class="btn btn-primary">D3.js</a>
                </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/ridgeline.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Scatter -->
    <div class="portfolio-modal modal fade" id="scatter" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/scatter.html"><img class="img-fluid d-block mx-auto" src="img/section/ScatterPlot150.png" alt=""></a>

                  <a href="graph/scatter.html"><h2 class="text-uppercase">Scatter plot</h2></a>
                  <p class="item-intro text-muted">Show the relationship between 2 numeric variables.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/scatter.html">scatterplot</a> displays the relationship between 2 numeric variables. For each data point, the value of its first variable is represented on the X axis, the second on the Y axis</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/overplotting.html">Overplotting</a> is the most common mistake when sample size is high.</li><li>Don't forget to show subgroups if you have some.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/scatterplot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/scatter-plot/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/scatter" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/scatter-plot" class="btn btn-primary">React</a>
                </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/scatter.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Heatmap -->
    <div class="portfolio-modal modal fade" id="heatmap" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/heatmap.html"><img class="img-fluid d-block mx-auto" src="img/section/Heatmap150.png" alt=""></a>

                  <a href="graph/heatmap.html"><h2 class="text-uppercase">Heatmap</h2></a>
                  <p class="item-intro text-muted">Like watching a table from above</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/heatmap.html">heatmap</a> is a graphical representation of data where the individual values contained in a matrix are represented as colors. It is a bit like looking a data table from above. <br>It is really useful to display a general view of numerical data, not to extract specific data point.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Often need to <a href="graph/heatmap.html">normalize your data</a></li><li>Use <a href="graph/heatmap.html">cluster analysis</a> and thus permute the rows and the columns of the matrix to place similar values near each other according to the clustering</li><li><a href="http://www.data-to-viz.com/caveat/rainbow.html">Color palette</a> is important</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/heatmap/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/heatmap/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/heatmap" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/heatmap" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/heatmap.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


        <!-- Correlogram -->
    <div class="portfolio-modal modal fade" id="correlogram" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/correlogram.html"><img class="img-fluid d-block mx-auto" src="img/section/Correlogram150.png" alt=""></a>

                  <a href="graph/correlogram.html"><h2 class="text-uppercase">Correlogram</h2></a>
                  <p class="item-intro text-muted">Relationship between each pair of numeric variables</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/correlogram.html">correlogram</a> or correlation matrix allows to analyse the relationship between each pair of numeric variables of a matrix.<br>The correlation between each pair of variable is visualised through a <a href="graph/scatter.html">scatterplot</a>, or a symbol that represents the correlation (bubble, line, number..).<br>The diagonal often represents the distribution of each variable, using an <a href="graph/histogram.html">histogram</a> or a <a href="graph/density.html">density</a> plot.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Displaying the relationship between more than ~10 variables makes the plot very hard to read</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/correlogram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/correlogram/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/correlogram" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/correlogram" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/correlogram.html">dedicated section</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Bubble -->
    <div class="portfolio-modal modal fade" id="bubble" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/bubble.html"><img class="img-fluid d-block mx-auto" src="img/section/BubblePlot150.png" alt=""></a>

                  <a href="graph/bubble.html"><h2 class="text-uppercase">Bubble plot</h2></a>
                  <p class="item-intro text-muted">A scatterplot with variable dot size.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/bubble.html">bubble plot</a> is a <a href="graph/scatter.html">scatterplot</a> where a third dimension is added: the value of an additional numeric variable is represented through the size of the dots.<br><br>You need 3 numerical variables as input: one is represented by the X axis, one
by the Y axis, and one by the dot size.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Use bubble area as metrics, <a href="caveat/radius_or_area.html">not diameter</a>.</li><li>As for scatter, bubble plot suffers <a href="caveat/overplotting.html">overplotting</a> if sample size is too big.</li><li>Show a legend for bubble size.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/bubble-chart/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/bubble-plot/" class="btn btn-primary">Python</a>
                  <a href="https://www.d3-graph-gallery.com/bubble" class="btn btn-primary">D3.js</a>
                  <a href="https://www.react-graph-gallery.com/bubble-plot" class="btn btn-primary">React</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/bubble.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Connected scatter -->
    <div class="portfolio-modal modal fade" id="connectedscatter" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/connectedscatter.html"><img class="img-fluid d-block mx-auto" src="img/section/ScatterConnected150.png" alt=""></a>

                  <a href="graph/connectedscatter.html"><h2 class="text-uppercase">Connected Scatter</h2></a>
                  <p class="item-intro text-muted">Between the scatter and the line charts.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/connectedscatter.html">connected scatter plot</a> shows the relationship between two variables represented by the X and the Y axis, like a  <a href="graph/scatter.html">scatter plot</a> does. Moreover, dots are connected by segments, as for a <a href="graph/line.html">line plot</a>. <br><br>Most of the time, they are exactly the same as a line plot and just allow to understand where each measure has been done. Sometimes, points are connected in an order different from the X axis, giving a supplementary information to the graphic.

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Don't use <a href="caveat/dual_axis.html">dual axis</a>.</li><li>As for scatter, mind <a href="caveat/overplotting.html">overplotting</a> if sample size is too big.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/connected-scatterplot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/connected-scatter-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/connectedscatter" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/connectedscatter.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Density 2d -->
    <div class="portfolio-modal modal fade" id="density2d" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/density2d.html"><img class="img-fluid d-block mx-auto" src="img/section/2dDensity150.png" alt=""></a>

                  <a href="graph/density2d.html"><h2 class="text-uppercase">Density 2d</h2></a>
                  <p class="item-intro text-muted">2d representation of a joint distribution.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/density2d.html">2d density plot</a> shows the distribution of values in a dataset across the range of two quantitative variables. <br><br>It counts the number of observations within a particular area of the 2D space and represent it using square, hexagon, or kernel density estimation.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Play with <a href="caveat/bin_size.html">bin size / bandwidth</a>.</li><li>Useful only if sample size is huge.</li><li>Pick up a good <a href="caveat/rainbow.html">color palette</a>.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/2d-density-chart/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/2d-density-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/density2d" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/density2d.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Barplot -->
    <div class="portfolio-modal modal fade" id="barplot" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/barplot.html"><img class="img-fluid d-block mx-auto" src="img/section/Bar150.png" alt=""></a>

                  <a href="graph/barplot.html"><h2 class="text-uppercase">Barplot</h2></a>
                  <p class="item-intro text-muted">Represents the value of entities using bar of various length.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/barplot.html">barplot</a> shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value.<br><br>Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Do not confound it with a histogram.</li><li>Long labels? Think of an <a href="caveat/hard_label.html">horizontal version</a>.</li><li><a href="caveat/order_data.html">Sorting bars</a> often add insight.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/barplot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/barplot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/barplot" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/barplot.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Spider -->
    <div class="portfolio-modal modal fade" id="spider" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="caveat/spider.html"><img class="img-fluid d-block mx-auto" src="img/section/Spider150.png" alt=""></a>

                  <a href="caveat/spider.html"><h2 class="text-uppercase">Spider Chart</h2></a>
                  <p class="item-intro text-muted">Also called Web chart or Radar chart.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="caveat/spider.html">Radar chart</a> is a two-dimensional chart type designed to plot one or more series of values over multiple common quantitative variables. Each variable has its own axis, all axis are joint in the center of the figure.<br><br>Radar chart is <a href="caveat/spider.html">often criticized</a> in dataviz, and it is probably not the best way to convey information.<br><br></p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Do not display more than ~5 groups on the same plot, use <a href="caveat/spider.html">faceting instead</a>.</li><li>Be careful if you use variables with different scales. At least, do not forget to <a href="caveat/spider.html">display values</a> on each scale</li><li>Read this page about <a href="caveat/spider.html">radar chart weaknesses</a></li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/spider-or-radar-chart/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/radar-chart/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/spider" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="caveat/spider.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Wordcloud -->
    <div class="portfolio-modal modal fade" id="wordcloud" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/wordcloud.html"><img class="img-fluid d-block mx-auto" src="img/section/Wordcloud150.png" alt=""></a>

                  <a href="graph/wordcloud.html"><h2 class="text-uppercase">Wordcloud</h2></a>
                  <p class="item-intro text-muted">A visual representation of text data.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/wordcloud.html">Wordcloud</a> (or Tag cloud) displays a list of words, the importance of each beeing shown with font size or color. This format is useful for quickly perceiving the most prominent terms.<br><br>This type of visualization is well known by the public and eye-catching. It works well to reveal the essential. However, wordcloud is often criticized for not being insightful and to distort reality. For example, long words will be more prominent on the picture independently of their occurence.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Doing a <a href="graph/wordcloud.html">wordcloud</a> itself is not a best practice.</li><li>Useful only if sample size is huge.</li><li>Use a horizontal <a href="graph/lollipop.html">lolipop</a> plot instead?</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/wordcloud/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/wordcloud/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/wordcloud" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/wordcloud.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Parallel -->
    <div class="portfolio-modal modal fade" id="parallel" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/parallel.html"><img class="img-fluid d-block mx-auto" src="img/section/Parallel1150.png" alt=""></a>

                  <a href="graph/parallel.html"><h2 class="text-uppercase">Parallel coordinates</h2></a>
                  <p class="item-intro text-muted">Compare samples for several numeric values.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/parallel.html">Parallel plot</a> or Parallel Coordinates plot allows to compare the feature of several individual observations on a set of numeric variables. Each vertical bar represents a variable and usually has its own scale. (The
                  units can even be different). Values are then plotted as series of lines connected across each axis.<br><br>Parallel plot is the equivalent of a <a href="caveat/spider.html">spider chart</a>, but with cartesian coordinates. Thus, it is often prefered.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Like for <a href="graph/line.html">line chart</a>, displaying too many samples result in a cluttered and unreadable <a href="caveat/spaghetti.html">spaghetti chart</a>.</li><li><a href="caveat/order_data.html">Sort the variables</a> on the X axis, it makes sense to avoid crosses in sample lines.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/parallel-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/parallel-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/parallel" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/parallel.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Lollipop -->
    <div class="portfolio-modal modal fade" id="lollipop" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/lollipop.html"><img class="img-fluid d-block mx-auto" src="img/section/Lollipop150.png" alt=""></a>

                  <a href="graph/lollipop.html"><h2 class="text-uppercase">Lollipop</h2></a>
                  <p class="item-intro text-muted">A fancy barplot, with even more options.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/lollipop.html">lollipop plot</a> is basically a <a href="graph/barplot.html">barplot</a>, where the bar is transformed in a line and a dot. It shows the relationship between a numeric and a categoric variable.<br><br>However it is more appealing and convey as well the information. It is especially useful when you have several bars of the same height: it avoids to have a cluttered figure and a Moiré effect.<br><br>The Cleveland dot plot is a handy variation, allowing to compare the value of 2 numeric values for each group.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/order_data.html">Order your samples</a>, it makes the figure way more impactful</li><li>If for whatever reason your bars must remain unsorted, it is probably better to use a barplot instead. Lollipop would be harder to read.</li><li>A horizontal version allows to <a href="caveat/hard_label.html">read labels more easily</a></li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/lollipop-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/lollipop-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/lollipop" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/lollipop.html">Dedicated page</a> | <a href="https://www.tableau.com/about/blog/2017/1/viz-whiz-when-use-lollipop-chart-and-how-build-one-64267">Viz Variety Show</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Circular Barplot -->
    <div class="portfolio-modal modal fade" id="circularbarplot" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/circularbarplot.html"><img class="img-fluid d-block mx-auto" src="img/section/CircularBarplot150.png" alt=""></a>

                  <a href="graph/circularbarplot.html"><h2 class="text-uppercase">Circular Barplot</h2></a>
                  <p class="item-intro text-muted">A barplot with a circularized X axis.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/circularbarplot.html">circular barplot</a> is a <a href="graph/barplot.html">barplot</a>, with each bar displayed along a circle instead of a line. Thus, it is advised to have a good understanding of how barplot work before making it circular.<br><br>Circular bar chart is very ‘eye catching’  and allows a better use of the space than a long usual barplot.<br><br> However it is more difficult to read the differences between each bar size. Thus, circular barcharts make sense only if you have an huge number of bar to display, and if an obvious pattern pops out.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>The proportion of the inner circle must be huge (>1/3). Otherwise <a href="http://www.data-to-viz.com/caveat/circular_bar_yaxis.html">bars are very skewed</a>.</li><li>Works only if you have many levels to display (> ~40) and a clear pattern</li><li>Keep displaying a Y axis all along the circle.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/circular-barplot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/circular_barplot" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/circularbarplot.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Treemap -->
    <div class="portfolio-modal modal fade" id="treemap" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/treemap.html"><img class="img-fluid d-block mx-auto" src="img/section/Tree150.png" alt=""></a>

                  <a href="graph/treemap.html"><h2 class="text-uppercase">Treemap</h2></a>
                  <p class="item-intro text-muted">Divide your whole in rectangles</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/treemap.html">Treemap</a> displays hierarchical data as a set of nested rectangles. Each group is represented by a rectangle, which area is proportional to its value. Using color schemes, it is possible to represent several dimensions: groups, subgroups etc.<br><br>Treemaps have the advantage to make efficient use of space, what makes them useful to represent a big amount of data.<br><br>If you have many levels of hierarchy (>2), it is advised to build an interactive figure: clicking on a upper level of organization will reveal the next level and so on.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Don't annotate more than 3 levels of the hierarchy, it would make the figure unreadable.</li><li>Prioritize the highest level of the hierarchy.</li><li><a href="graph/treemap.html">Interactive version</a> really makes sense for treemap.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/treemap/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/treemap/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/treemap" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/treemap.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Venn -->
    <div class="portfolio-modal modal fade" id="venn" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/venn.html"><img class="img-fluid d-block mx-auto" src="img/section/Venn150.png" alt=""></a>

                  <a href="graph/venn.html"><h2 class="text-uppercase">Venn diagram</h2></a>
                  <p class="item-intro text-muted">Show list sizes and their intersection.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/venn.html">Venn diagram</a> (also called primary diagram, set diagram or logic diagram) is a diagram that shows all possible logical relationships between a finite collection of different sets.<br><br>Each set is represented by a circle. The circle size represents the importance of the group. The groups are usually overlapping: the size of the overlap represents the intersection between both groups.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Don't display more than 3 groups. Over this limit the figure gets very hard to read.</li><li>If working with 2 groups, make the circle areas proportional to the represented values.</li><li>Write the numbers into each areas.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/venn-diagram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/venn-diagram/" class="btn btn-primary">Python gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/venn.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Donut -->
    <div class="portfolio-modal modal fade" id="donut" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/donut.html"><img class="img-fluid d-block mx-auto" src="img/section/Doughnut150.png" alt=""></a>

                  <a href="graph/donut.html"><h2 class="text-uppercase">Doughnut chart</h2></a>
                  <p class="item-intro text-muted">A pieplot with an area of the center cut out.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A doughnut plot displays the value of several entities, really often to show proportions that must add up to 100%.<br><br>It is very close from a <a href="caveat/pie.html">pie plot</a> and thus suffers the same drawbacks. It is thus better to avoid using it, why not replacing it with a <a href="graph/barplot.html">barplot</a> or <a href="graph/lollipop.html">lollipop plot</a>?</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Most of the time, it is better to avoid doughnut chart for the <a href="caveat/pie.html">same reasons</a> than pie plots.</li><li>Don't use 3D.</li><li>Don't use a side legend. Annotate directly each slice.</li><li>If using percentages, make sure it adds up to 100%</li><li>Don't put several doughnut one beside each other to compare them.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/doughnut-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/donut-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/donut" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/donut.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Pie -->
    <div class="portfolio-modal modal fade" id="pie" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="caveat/pie.html"><img class="img-fluid d-block mx-auto" src="img/section/Pie150.png" alt=""></a>

                  <a href="caveat/pie.html"><h2 class="text-uppercase">Pie chart</h2></a>
                  <p class="item-intro text-muted">A circular graphic divided into slices to illustrate numerical proportion.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="caveat/pie.html">pie chart</a> is a circle divided into sectors that each represent a proportion of the whole. It is often used to show proportion, where the sum of the sectors equal 100%.<br><br>Pie charts are highly critized and must be avoided as much as possible. Human is very bad at translating angles towards values.<br><br>Instead, why not considering a <a href="graph/barplot.html">bar chart</a> or a <a href="graph/lollipop.html">lollipop plot</a>?</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/pie.html">Don't use it</a></li><li>Don't use 3D.</li><li>Don't use a legend, annotate directly each slice.</li><li>If displaying proportion, <a href="caveat/calculation_error.html">sum must add up to 100</a>.</li><li>Don't put several pie charts one beside each other to compare them.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/pie-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/pie-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/pie" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify"><a href="caveat/pie.html">Dedicated page</a> | <a href="https://blog.datawrapper.de/pie-charts/">What to consider when creating pie charts</a> by Uncharted.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- Dendrogram -->
    <div class="portfolio-modal modal fade" id="dendrogram" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/dendrogram.html"><img class="img-fluid d-block mx-auto" src="img/section/Dendrogram150.png" alt=""></a>

                  <a href="graph/dendrogram.html"><h2 class="text-uppercase">Dendrogram</h2></a>
                  <p class="item-intro text-muted">A tree showing a hierarchical organization.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/dendrogram.html">dendrogram</a> is a network structure. It is constituted of a root node that gives birth to several nodes connected by edges or branches.<br><br>Dendrogram can be made with 2 types of dataset. i/ A numeric matrix allowing to compute distance between individuals ii/ A hierarchical dataset where the relationship between entities is provided directly.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important">
                    <ul>
                      <li>If using a clustering algorythm, be sure you understood <a href="graph/dendrogram.html">which metrics have been used</a> for the distance calculation and for the clustering algorythm.</li>
                      <li>Horizontal version are appreciated with long labels</li>
                      <li>Showing the <a href="graph/heatmap.html">heatmap</a> is a good practice if you're working with clustering.</li>
                    </ul>
                  </div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/dendrogram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/dendrogram/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/dendrogram" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/dendrogram.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- Circular packing -->
    <div class="portfolio-modal modal fade" id="circularpacking" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/circularpacking.html"><img class="img-fluid d-block mx-auto" src="img/section/CircularPacking150.png" alt=""></a>

                  <a href="graph/circularpacking.html"><h2 class="text-uppercase">Circular Packing</h2></a>
                  <p class="item-intro text-muted">A circular version of a Treemap.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/circularpacking.html">Circular packing</a> or circular treemap allows to visualise a hierarchic architecture. It is an equivalent of a <a href="graph/treemap.html">treemap</a> or a <a href="graph/dendrogram.html">dendrogram</a>, where each node of the tree is represented as a circle and its sub-nodes are represented as circles inside of it. The size of each circle can be proportional to a specific value, what gives more insight to the plot.<br><br>If only one level of hierarchy is displayed (no encapsulation), it becomes equivalent to a <a href="graph/barplot.html">barplot</a>. Instead of showing the value of each individual as a bar, it uses a circle.<br><br>Circle packing is not recommended if you need to precisely compare values of group. However, it shows very well how groups are organised in subgroups. It uses the space less efficiently than a treemap, but the hierarchy gets more obvious.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>If many levels in the hierarchy, using an interactive version is advised.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/circle-packing/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/circularpacking" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/circularpacking.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>




    <!-- Sunburst -->
    <div class="portfolio-modal modal fade" id="sunburst" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/sunburst.html"><img class="img-fluid d-block mx-auto" src="img/section/Sunburst150.png" alt=""></a>

                  <a href="graph/sunburst.html"><h2 class="text-uppercase">Sunburst diagram</h2></a>
                  <p class="item-intro text-muted">Also called multi-level pie chart or Radial Treemap.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/sunburst.html">sunburst diagram</a> displays a hierarchical structure. The origin of the organization is represented by the center of the circle, and each level of the organization by an aditional ring. The last level (leaves) are located at the extreme outer part of the circle.<br><br>It is possible to map a numeric value to each leaf of the graphic, in this case their size will be proportional to this value.<br><br>Sunburst diagrams suffer the same issue than <a href="caveat/pie.html">pie</a> or <a href="graph/donut.html">doughnut</a> plot: it is really hard to compare the size of different slices and thus conveys poorly the information. You should probably consider treemap, circular packing or dendrogram.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Do not confound it with a circular stacked barplot.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="http://www.r-graph-gallery.com" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/sunburst" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/sunburst.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>





    <!-- Line -->
    <div class="portfolio-modal modal fade" id="line" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/line.html"><img class="img-fluid d-block mx-auto" src="img/section/Line150.png" alt=""></a>

                  <a href="graph/line.html"><h2 class="text-uppercase">Line chart</h2></a>
                  <p class="item-intro text-muted">Shows the evolution of numeric variables.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/line.html">line chart</a> or line graph displays the evolution of one or several numeric variables. Data points are connected by straight line segments. It is similar to a <a href="graph/scatter.html">scatter plot</a> except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments.<br><br>A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically.<br><br>When several values are available for each time stamp, data can be aggregated and a confidence zone is generally added around the trend.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/cut_y_axis.html">To cut or not to cut</a> the Y axis?</li><li>If you need to compare the evolution of 2 different variables, do not use <a href="caveat/dual_axis.html">dual axis</a>.</li><li>Mind the <a href="caveat/spaghetti.html">spaghetti chart</a>: too many lines make the chart unreadable.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/line-plot/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/line-chart/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/line" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/line.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Area-->
    <div class="portfolio-modal modal fade" id="area" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/area.html"><img class="img-fluid d-block mx-auto" src="img/section/Area150.png" alt=""></a>

                  <a href="graph/area.html"><h2 class="text-uppercase">Area chart</h2></a>
                  <p class="item-intro text-muted">A line graph, filling the area under the curve.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">An <a href="graph/area.html">area chart</a> is really similar to a <a href="graph/line.html">line chart</a>, except that the area between the x axis and the line is filled in with color or shading. It represents the evolution of a numeric variable.<br><br>I am a big fan of area charts and believe that it makes the trend more obvious than using a line graph.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li><a href="caveat/cut_y_axis.html">To cut or not to cut</a> the Y axis?</li><li>Using the same color for the line and the fill with more transparency for the fill usually gives a nice visual.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/area-chart/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/area-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/area" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/area.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Stacked area -->
    <div class="portfolio-modal modal fade" id="stackedarea" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/stackedarea.html"><img class="img-fluid d-block mx-auto" src="img/section/StackedArea150.png" alt=""></a>

                   <a href="graph/stackedarea.html"><h2 class="text-uppercase">Stacked Area</h2></a>
                  <p class="item-intro text-muted">A stacked version of the area chart to compare several groups.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A  <a href="graph/stackedarea.html">stacked area chart</a> is the extension of a basic  <a href="graph/area.html">area chart</a> which displays the evolution of the value of several groups on the same graphic. The values of each group are displayed on top of each other, what allows to check on the same figure the evolution of both the total of a numeric variable, and the importance of each group.<br><br>If only the relative importance of each group interests you, you should probably draw a percent stacked area chart. It is the same thing, but proportion of each group are represented instead of absolute value.<br><br><a href="graph/stackedarea.html">Stacked area chart</a> are criticized. Indeed, it can be hard to read the evolution of a specific group, since the reader has to substract the other groups in his mind. It is often better to use small multiple or line plot instead.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Use it with care, try using small multiple or line chart instead.</li><li>The group order (from bottom to top) can have an influence, try several orders.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/stacked-area-graph/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/stacked-area-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/stackedarea" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/stackedarea.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Stream chart-->
    <div class="portfolio-modal modal fade" id="streamgraph" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/streamgraph.html"><img class="img-fluid d-block mx-auto" src="img/section/Stream150.png" alt=""></a>

                  <a href="graph/streamgraph.html"><h2 class="text-uppercase">Streamgraph</h2></a>
                  <p class="item-intro text-muted">A smooth version of the stacked area chart.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/streamgraph.html">Stream graph</a> is a type of <a href="graph/stackedarea.html">stacked area chart</a>. It displays the evolution of a numeric value (Y axis) following another numeric value (X axis). This evolution is represented for several groups, all with a distinct color.<br><br>Contrary to a stacked area, there is no corner: edges are rounded what gives this nice impression of flow. Moreover, areas are usually displaced around a central axis, resulting in a flowing and organic shape.<br><br><a href="graph/streamgraph.html">Stream chart</a> gets really useful when displayed in an interactive mode: highlighting a group gives you directly an insight of its evolution.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Good to study the relative proportions of the whole.</li><li>Bad to study the <a href="">evolution of each individual</a> group: it is very hard to substract the height of other groups at each time point.</li><li>For a more accurate but less attractive figure, consider a <a href="graph/line.html">line chart</a> or using small multiple.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/streamgraph/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/streamchart/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/streamgraph" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/streamgraph.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Map-->
    <div class="portfolio-modal modal fade" id="map" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/map.html"><img class="img-fluid d-block mx-auto" src="img/section/Map150.png" alt=""></a>

                  <a href="graph/map.html"><h2 class="text-uppercase">Background Map</h2></a>
                  <p class="item-intro text-muted">The basis of all geospatial analysis.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">Drawing a <a href="graph/map.html">background map</a> is the first step of any geospatial analysis.<br><br>Once this background is available, you can color each region to get a <a href="graph/choropleth.html">choropleth</a> map, add points or bubble to get a <a href="graph/bubblemap.html">bubble map</a>, reshape the region to get a <a href="graph/cartogram.html">cartogram</a>, or show connection with a <a href="story/MapConnection.html">connection map</a>.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Be careful concerning the projection of geo coordinates you are using.</li><li>Indicate your source of information and the projection used.</li><li>Don't use color without obvious purpose</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/map/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/map/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/backgroundmap" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/map.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>




    <!-- Hexbin Map-->
    <div class="portfolio-modal modal fade" id="hexbinmap" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/hexbinmap.html"><img class="img-fluid d-block mx-auto" src="img/section/MapHexbin150.png" alt=""></a>

                  <a href="graph/hexbinmap.html"><h2 class="text-uppercase">Hexbin Map</h2></a>
                  <p class="item-intro text-muted">Split the geographic region in a multitude of hexagons</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/hexbinmap.html">hexbin map</a> splits a geographic area in a multitude of hexagons. A numeric value is attributed to each hexagone, what controls its color.<br><br>Hexbin map is a kind of <a href="graph/choropleth.html">choropleth map</a>. It removes the bias introduced by the different region size in choropleth, since each region is represented by the same hexagone.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Hexbin map can be confusing for reader. It is indeed harder to make the link with a real map since usual geographic landmarks are not present.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/hexbin-map/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/2d-density-plot/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/hexbinmap" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/hexbinmap.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>




    <!-- Cartogram-->
    <div class="portfolio-modal modal fade" id="cartogram" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/cartogram.html"><img class="img-fluid d-block mx-auto" src="img/section/Cartogram150.png" alt=""></a>

                  <a href="graph/cartogram.html"><h2 class="text-uppercase">Cartogram</h2></a>
                  <p class="item-intro text-muted">Distorts regions to map a quantitative variable</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/cartogram.html">cartogram</a> is a map in which the geometry of regions is distorted in order to convey the information of an alternate variable.<br><br>Cartogram aims to correct the bias that can be observed in a <a href="graph/choropleth.html">choropleth map</a>: when a variable is aggregated per region, a region with very few data points will look as important as a region with many data points</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Normalize your variable: you cannot compare raw numbers between regions of distinct size or population.</li><li>Take a huge care when choosing the continuous color palette.</li><li>Don't forget the legend.</li></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/cartogram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/cartogram" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/cartogram.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- Choropleth -->
    <div class="portfolio-modal modal fade" id="choropleth" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/choropleth.html"><img class="img-fluid d-block mx-auto" src="img/section/Choropleth150.png" alt=""></a>

                  <a href="graph/choropleth.html"><h2 class="text-uppercase">Choropleth map</h2></a>
                  <p class="item-intro text-muted">Display a aggregated value for each region of the map.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/choropleth.html">choropleth map</a> displays divided geographical areas or regions that are coloured in relation to a numeric variable. It allows to study how a variable evolutes along a territory.<br><br>It is a powerful and widely used data visualization technique. However, its downside is that regions with bigger sizes tend to have a bigger weight in the map interpretation, which includes a bias.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Normalize your variable: you cannot compare raw numbers between regions of distinct size or population.</li><li>Take a huge care when choosing the continuous color palette.</li><li>Don't forget the legend.</li><li>If your regions have a broad range of sizes it introduces a biais. You could consider using hexbin maps instead.</li><li>Don't call it ch<em>L</em>oropleth map.</ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/chloropleth-map/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/choropleth-map/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/choropleth" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/choropleth.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- Connection map-->
    <div class="portfolio-modal modal fade" id="connection" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="story/MapConnection.html"><img class="img-fluid d-block mx-auto" src="img/section/ConnectedMap150.png" alt=""></a>

                  <a href="story/MapConnection.html"><h2 class="text-uppercase">Connection map</h2></a>
                  <p class="item-intro text-muted">Shows multiple connection using lines or arcs.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="story/MapConnection.html">connection map</a> allows to show the connection between several positions on a map.<br><br>The link between 2 places can be drawn with a straight line, or more commonly by representing the ‘great circle‘: the shortest route between them. Knowing that the earth is a sphere, this results in rounded lines that give a really pleasant look to the map.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>If showing a multitude of connection, think of the order of the traits you draw. The latest will be more apparant.</li><li>Use <a href="story/MapConnection.html">great circle</a> instead of straight lines.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/connection-map/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/connection-map/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/connection" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="story/MapConnection.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Bubble map-->
    <div class="portfolio-modal modal fade" id="bubblemap" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/bubblemap.html"><img class="img-fluid d-block mx-auto" src="img/section/BubbleMap150.png" alt=""></a>

                  <a href="graph/bubblemap.html"><h2 class="text-uppercase">Bubble maps</h2></a>
                  <p class="item-intro text-muted">Bubbles on a map to show quantitative variables.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/bubblemap.html">bubble map</a> uses circles of different size to represent a numeric value on a territory.<br><br>It is possible to display a bubble per geographic coordinate, or a bubble per region (in this case the bubble is usually displayed in the baricentre of the region).<br><br><a href="graph/bubblemap.html">Bubble map</a> allows to avoid the bias caused by regional area sizes in choropleth maps.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Map the numeric variable to the bubble area, <a href="caveat/radius_or_area.html">not to the bubble diameter.</a></li><li>Use transparency if bubbles are overlapping.</li><li>Display a legend to understand the meaning of bubble size, or annotate each bubble.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/bubble-map/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/bubble-map/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/bubblemap" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/bubblemap.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Chord -->
    <div class="portfolio-modal modal fade" id="chord" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/chord.html"><img class="img-fluid d-block mx-auto" src="img/section/Chord150.png" alt=""></a>

                  <a href="graph/chord.html"><h2 class="text-uppercase">Chord diagram</h2></a>
                  <p class="item-intro text-muted">A circular plot showing connections.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/chord.html">Chord diagrams</a> allow to visualize flows or connections between several entities (nodes). Each entity is represented by a fragment on the outer part of the circular layout. Then, arcs are drawn between each entities. The size of the arc is proportional to the importance of the flow<br><br>Chord diagrams are eye catching and quite popular in data visualization. Their main downside is that they becom quickly cluttered and unreadable. Hierarchical edge bundling is a really close type of graphic that allows to avoid this issue.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Order of groups around the circle is important, it is better to minimize the number of arcs crossing.</li><li>Chord diagrams are not straightforward to understand. Give plenty of explanation to your audience when you present it.</li><li>Mind over-cluttering.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/chord-diagram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/chord-diagram/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/chord" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/chord.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Network -->
    <div class="portfolio-modal modal fade" id="network" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/network.html"><img class="img-fluid d-block mx-auto" src="img/section/Network150.png" alt=""></a>

                  <a href="graph/network.html"><h2 class="text-uppercase">Network</h2></a>
                  <p class="item-intro text-muted">A set of nodes and links</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/network.html">Network diagrams</a> (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges).<br><br>Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node.<br><br>Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Hairball is the main enemy: when too many connection and no obivious pattern is represented, the figure get cluttered and unreadable.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/network/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/network-chart/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/network" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/network.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Sankey-->
    <div class="portfolio-modal modal fade" id="sankey" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/sankey.html"><img class="img-fluid d-block mx-auto" src="img/section/Sankey150.png" alt=""></a>

                  <a href="graph/sankey.html"><h2 class="text-uppercase">Sankey diagram</h2></a>
                  <p class="item-intro text-muted">Showing flows with smooth links</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">A <a href="graph/sankey.html">Sankey Diagram</a> is a visualisation technique that allows to display flows. Several entities (nodes) are represented by rectangles or text. Their links are represented with arrows or arcs that have a width proportional to the importance of the flow.<br><br>Note that an <a href="graph/sankey.html">Alluvial diagram</a> is a sub category of Sankey diagrams where nodes are grouped in vertical nodes (sometimes called steps).</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Node position is important: minimize the number of crossing between links.</li><li>Mind over-cluttering that makes the figure unreadable: dismiss weak connections.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/sankey-diagram/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://python-graph-gallery.com/sankey-diagram/" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/sankey" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/sankey.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<!-- Arc diagram-->
    <div class="portfolio-modal modal fade" id="arc" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/arc.html"><img class="img-fluid d-block mx-auto" src="img/section/Arc150.png" alt=""></a>

                  <a href="graph/arc.html"><h2 class="text-uppercase">Arc diagram</h2></a>
                  <p class="item-intro text-muted">A network structure where nodes are aligned.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify">An <a href="graph/arc.html">arc diagram</a> is a special kind of network graph. It is consituted by nodes that represent entities and by links that show relationships between entities.<br><br>In arc diagrams, nodes are displayed along a single axis and links are represented with arcs.<br><br>They do not convey the overall node structure than an <a href="graph/network.html">2d network</a>, but can highlight clusters and briges if the node order is chosen correclty.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Finding the best node order is the key for an insightful arc diagram</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.python-graph-gallery.com" class="btn btn-primary">Python gallery</a>
                  <a href="https://www.d3-graph-gallery.com/arc" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/arc.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


<!-- Hierarchical edge bundling -->
    <div class="portfolio-modal modal fade" id="bundle" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <a href="graph/edge_bundling.html"><img class="img-fluid d-block mx-auto" src="img/section/Bundle150.png" alt=""></a>

                  <a href="graph/edge_bundling.html"><h2 class="text-uppercase">Hierarchical edge bundling</h2></a>
                  <p class="item-intro text-muted">A network structure where nodes are aligned.</p>
                  <div class="cardtitle">About</div>
                  <hr>
                  <p style="text-align: justify"><a href="graph/edge_bundling.html">Hierarchical edge bundling</a> is a data visualisation method allowing to check connections between leaves of a hierarchical network.<br><br>Instead of using straight line to do so, each connection is curved and follow the hierarchical path between the 2 nodes. This technique minimize the clutter and allows to detect trends more efficiently.</p>

                  <div class="cardtitle">Common Mistakes</div>
                  <hr>
                  <div style="text-align: left !important"><ul><li>Play with bin size / bandwidth.</li><li>Useful only if sample size is huge.</li><li>Pick up a good color palette.</li></ul></div>

                  <div class="cardtitle">Code</div>
                  <hr>
                  <p>
                  <a href="https://www.r-graph-gallery.com/hierarchical-edge-bundling/" class="btn btn-primary">R graph gallery</a>
                  <a href="https://www.d3-graph-gallery.com/bundle" class="btn btn-primary">D3.js gallery</a>
                  </p>

                  <div class="cardtitle">Read More</div>
                  <hr>
                  <p style="text-align: justify">See the <a href="graph/edge_bundling.html">dedicated page</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



<!-- ======================================================================= -->











<!-- ======================== JAVASCRIPT SECTION =========================== -->



    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Tom's script for button colors -->
    <script src="js/portfolio.js"></script>
    <script src="js/tree.js"></script>

    <!-- Load d3.js -->
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!-- By default, show the numeric tree -->
    <script>
      showTree('num');
    </script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    })
    </script>


 <script>
  function closeBanner() {
    event.stopPropagation(); // Stop the event from propagating to parent elements
    event.preventDefault(); // Prevent the default action (link navigation)
    document.getElementById('promo-banner').style.display = 'none';
  }
 </script>


  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-79254642-3');
  </script>
  <script>
  var getOutboundLink = function(url) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': url,
      'transport_type': 'beacon',
      'event_callback': function(){document.location = url;}
    });
  }
  </script>




<!-- ======================================================================= -->
  </body>

</html>
